<!DOCTYPE html>
<html lang="en">

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <link href="css/layout.css" type="text/css" rel="stylesheet" />
  <link href="../ui.css" type="text/css" rel="stylesheet" />
  <title>ui.css</title>
</head>

<body>

  <div class="page">
    <div class="page_pr">
      <div class="pleft">
        <ul>
          <li><a href="#color">基础</a></li>
          <li class="on son li_color"><a href="#color">颜色</a></li>
          <li class="on son li_code"><a href="#code">代码</a></li>
          <li class="on son li_typography"><a href="#typography">排版</a></li>
          <li><a href="#container">结构</a></li>
          <li class="son li_container"><a href="#container">容器</a></li>
          <li class="son li_grid"><a href="#grid">栅格系统</a></li>
          <li class="son li_layout"><a href="#layout">布局</a></li>
          <li><a href="#animate">动效</a></li>
          <li class="son li_animate"><a href="#animate">Animate</a></li>
          <li><a href="#iconfont">图标</a></li>
          <li class="son li_iconfont"><a href="#iconfont">Iconfont</a></li>
          <li><a href="#charts">组件</a></li>
          <li class="son li_charts"><a href="#charts">图例Charts</a></li>
          <li class="son li_card"><a href="#card">卡片Card</a></li>
          <li class="son li_jumbotron"><a href="#jumbotron">巨幕Jumbotron</a></li>
          <li class="son li_list"><a href="#list">列表组List-group</a></li>
          <li class="son li_media"><a href="#media">媒体Media</a></li>
          <li class="son li_nav"><a href="#nav">导航、导航条Nav</a></li>
          <li class="son li_breadcrumb"><a href="#breadcrumb">面包屑Breadcrumb</a></li>
          <li class="son li_badge"><a href="#badge">徽章Badge</a></li>
          <li class="son li_placeholder"><a href="#placeholder">占位符Placeholder</a></li>
          <li class="son li_avatar"><a href="#avatar">头像Avatar</a></li>
          <li class="son li_spinners"><a href="#spinners">环状旋转器Spinners</a></li>
          <li class="son li_divider"><a href="#divider">分割线Divider</a></li>
          <li class="son li_passwordinput"><a href="#passwordinput">密码输入框PasswordInput</a></li>
          <li class="son li_image"><a href="#image">图片Image</a></li>
          <li class="son li_alert"><a href="#alert">警告Alert</a></li>
          <li class="son li_modal"><a href="#modal">模态框Modal</a></li>
          <li class="son li_pagination"><a href="#pagination">分页Pagination</a></li>
          <li class="son li_progress"><a href="#progress">进度条Progress</a></li>
          <li class="son li_steps"><a href="#steps">步骤条Steps</a></li>
          <li class="son li_timeline"><a href="#timeline">时间线Timeline</a></li>
          <li class="son li_poptip"><a href="#poptip">气泡提示Poptip</a></li>
          <li class="son li_menu"><a href="#menu">菜单Menu</a></li>
          <li class="son li_circle"><a href="#circle">进度环Circle</a></li>
          <li class="son li_carousel"><a href="#carousel">跑马灯Carousel</a></li>
          <li class="son li_tag"><a href="#tag">标签Tag</a></li>
          <li class="son li_dropdown"><a href="#dropdown">模拟下拉框Dropdown</a></li>
          <li class="son li_rate"><a href="#rate">评分Rate</a></li>
          <li><a href="#input">表单 &lt;form&gt;</a></li>
          <li class="son li_input"><a href="#input">文本框</a></li>
          <li class="son li_textarea"><a href="#textarea">文本域</a></li>
          <li class="son li_select"><a href="#select">下拉框</a></li>
          <li class="son li_button"><a href="#button">按钮</a></li>
          <li class="son li_radio"><a href="#radio">单选框</a></li>
          <li class="son li_checkbox"><a href="#checkbox">复选框</a></li>
          <li class="son li_switch"><a href="#switch">开关</a></li>
          <li class="son li_file"><a href="#file">上传控件</a></li>
          <li><a href="#table_1">表格 &lt;table&gt;</a></li>
          <li class="son li_table_1"><a href="#table_1">默认样式</a></li>
          <li class="son li_table_2"><a href="#table_2">首行样式</a></li>
          <li class="son li_table_3"><a href="#table_3">无外部边框样式</a></li>
          <li class="son li_table_4"><a href="#table_4">无内部边框样式</a></li>
          <li class="son li_table_5"><a href="#table_5">无全部边框样式</a></li>
          <li class="son li_table_6"><a href="#table_6">水平边框样式</a></li>
          <li class="son li_table_7"><a href="#table_7">水平边框无外边框样式</a></li>
          <li class="son li_table_8"><a href="#table_8">圆角样式</a></li>
          <li class="son li_table_9"><a href="#table_9">行间隔背景色</a></li>
          <li class="son li_table_10"><a href="#table_10">鼠标悬停样式</a></li>
          <li><a href="javascript:window.scrollTo(1,1)">返回顶部</a></li>
        </ul>
      </div>
      <!--pleft-->

      <div class="pright">
        <div id="color">
          <div class="page_tit">基础颜色</div>
          <div class="table_row">
            <div class="page_tit3">背景色使用 .back- 开头，字体色使用 .color- 开头</div>
            <div class="example">
              <div class="color-swatches">
                <div class="color-swatch">
                  <div class="item back-blue"></div>
                  .back-blue
                </div>
                <div class="color-swatch">
                  <div class="item back-indigo"></div>
                  .back-indigo
                </div>
                <div class="color-swatch">
                  <div class="item back-purple"></div>
                  .back-purple
                </div>
                <div class="color-swatch">
                  <div class="item back-pink"></div>
                  .back-pink
                </div>
                <div class="color-swatch">
                  <div class="item back-red"></div>
                  .back-red
                </div>
              </div>
              <div class="color-swatches">
                <div class="color-swatch">
                  <div class="item back-orange"></div>
                  .back-orange
                </div>
                <div class="color-swatch">
                  <div class="item back-yellow"></div>
                  .back-yellow
                </div>
                <div class="color-swatch">
                  <div class="item back-green"></div>
                  .back-green
                </div>
                <div class="color-swatch">
                  <div class="item back-teal"></div>
                  .back-teal
                </div>
                <div class="color-swatch">
                  <div class="item back-cyan"></div>
                  .back-cyan
                </div>
              </div>
              <div class="color-swatches">
                <div class="color-swatch">
                  <div class="item back-white"></div>
                  .back-white
                </div>
                <div class="color-swatch">
                  <div class="item back-gray"></div>
                  .back-gray
                </div>
                <div class="color-swatch">
                  <div class="item back-gray-dark"></div>
                  .back-gray-dark
                </div>
                <div class="color-swatch">
                  <div class="item back-dark-light"></div>
                  .back-dark-light
                </div>
                <div class="color-swatch">
                  <div class="item back-primary"></div>
                  .back-primary
                </div>
                <div class="color-swatch">
                  <div class="item back-secondary"></div>
                  .back-secondary
                </div>
              </div>
              <div class="color-swatches">
                <div class="color-swatch">
                  <div class="item back-success"></div>
                  .back-success
                </div>
                <div class="color-swatch">
                  <div class="item back-info"></div>
                  .back-info
                </div>
                <div class="color-swatch">
                  <div class="item back-warning"></div>
                  .back-warning
                </div>
                <div class="color-swatch">
                  <div class="item back-danger"></div>
                  .back-danger
                </div>
                <div class="color-swatch">
                  <div class="item back-light"></div>
                  .back-light
                </div>
                <div class="color-swatch">
                  <div class="item back-dark"></div>
                  .back-dark
                </div>
              </div>
            </div>
            <div class="pre">
              <ol>
                <li><span>&lt;div class="back-teal"&gt;</span></li>
                <li><span>&lt;/div&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
        </div>

        <div id="code">
          <div class="page_tit">代码</div>
          <div class="table_row">
            <div class="example">
              <div>For example, <code>&lt;section&gt;</code> should be wrapped as inline.</div>
              <div>
                <pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;&lt;p&gt;And another line of sample text here...&lt;/p&gt;</code></pre>
              </div>
              <div><var>y</var> = <var>m</var><var>x</var> + <var>b</var></div>
              <div>To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
                To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd></div>
              <div><samp>This text is meant to be treated as sample output from a computer program.</samp></div>
            </div>
            <div class="pre">
              <ol>
                <li>For example, <span class="p">&lt;</span><span class="nt">code</span><span class="p">&gt;</span><span
                    class="ni">&amp;lt;</span>section<span class="ni">&amp;gt;</span><span class="p">&lt;/</span><span
                    class="nt">code</span><span class="p">&gt;</span> should be wrapped as inline.
                </li>
                <li><span class="p">&lt;</span><span class="nt">pre</span><span class="p">&gt;&lt;</span><span
                    class="nt">code</span><span class="p">&gt;</span><span class="ni">&amp;lt;</span>p<span
                    class="ni">&amp;gt;</span>Sample text here...<span class="ni">&amp;lt;</span>/p<span
                    class="ni">&amp;gt;</span>
                  <span class="ni">&amp;lt;</span>p<span class="ni">&amp;gt;</span>And another line of sample text
                  here...<span class="ni">&amp;lt;</span>/p<span class="ni">&amp;gt;</span>
                  <span class="p">&lt;/</span><span class="nt">code</span><span class="p">&gt;&lt;/</span><span
                    class="nt">pre</span><span class="p">&gt;</span>
                </li>
                <li><span class="p">&lt;</span><span class="nt">var</span><span class="p">&gt;</span>y<span
                    class="p">&lt;/</span><span class="nt">var</span><span class="p">&gt;</span> = <span
                    class="p">&lt;</span><span class="nt">var</span><span class="p">&gt;</span>m<span
                    class="p">&lt;/</span><span class="nt">var</span><span class="p">&gt;&lt;</span><span
                    class="nt">var</span><span class="p">&gt;</span>x<span class="p">&lt;/</span><span
                    class="nt">var</span><span class="p">&gt;</span> + <span class="p">&lt;</span><span
                    class="nt">var</span><span class="p">&gt;</span>b<span class="p">&lt;/</span><span
                    class="nt">var</span><span class="p">&gt;</span></li>
                <li>To switch directories, type <span class="p">&lt;</span><span class="nt">kbd</span><span
                    class="p">&gt;</span>cd<span class="p">&lt;/</span><span class="nt">kbd</span><span
                    class="p">&gt;</span> followed by the name of the
                  directory.<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>
                  To edit settings, press <span class="p">&lt;</span><span class="nt">kbd</span><span
                    class="p">&gt;&lt;</span><span class="nt">kbd</span><span class="p">&gt;</span>ctrl<span
                    class="p">&lt;/</span><span class="nt">kbd</span><span class="p">&gt;</span> + <span
                    class="p">&lt;</span><span class="nt">kbd</span><span class="p">&gt;</span>,<span
                    class="p">&lt;/</span><span class="nt">kbd</span><span class="p">&gt;&lt;/</span><span
                    class="nt">kbd</span><span class="p">&gt;</span></li>
                <li><span class="p">&lt;</span><span class="nt">samp</span><span class="p">&gt;</span>This text is meant
                  to be treated as
                  sample output from a computer program.<span class="p">&lt;/</span><span class="nt">samp</span><span
                    class="p">&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
        </div>

        <div id="typography" class="maindiv">
          <div class="page_tit">排版</div>
          <div class="table_row">
            <div class="example">
              <table class="vt-table">
                <thead>
                  <tr>
                    <th>Heading</th>
                    <th>Example</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>
                      <code>&lt;h1&gt;&lt;/h1&gt;</code>
                    </td>
                    <td><span class="h1">h1. Awanbao heading</span></td>
                  </tr>
                  <tr>
                    <td>
                      <code>&lt;h2&gt;&lt;/h2&gt;</code>
                    </td>
                    <td><span class="h2">h2. Awanbao heading</span></td>
                  </tr>
                  <tr>
                    <td>
                      <code>&lt;h3&gt;&lt;/h3&gt;</code>
                    </td>
                    <td><span class="h3">h3. Awanbao heading</span></td>
                  </tr>
                  <tr>
                    <td>
                      <code>&lt;h4&gt;&lt;/h4&gt;</code>
                    </td>
                    <td><span class="h4">h4. Awanbao heading</span></td>
                  </tr>
                  <tr>
                    <td>
                      <code>&lt;h5&gt;&lt;/h5&gt;</code>
                    </td>
                    <td><span class="h5">h5. Awanbao heading</span></td>
                  </tr>
                  <tr>
                    <td>
                      <code>&lt;h6&gt;&lt;/h6&gt;</code>
                    </td>
                    <td><span class="h6">h6. Awanbao heading</span></td>
                  </tr>
                </tbody>
              </table>

              <table class="vt-table">
                <tbody>
                  <tr>
                    <td><span class="display-1">Display 1</span></td>
                  </tr>
                  <tr>
                    <td><span class="display-2">Display 2</span></td>
                  </tr>
                  <tr>
                    <td><span class="display-3">Display 3</span></td>
                  </tr>
                  <tr>
                    <td><span class="display-4">Display 4</span></td>
                  </tr>
                </tbody>
              </table>

              <p class="lead">
                This is a lead paragraph. It stands out from regular paragraphs.
              </p>

              <div>
                <p>You can use the mark tag to <mark>highlight</mark> text.</p>
                <p><del>This line of text is meant to be treated as deleted text.</del></p>
                <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
                <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
                <p><u>This line of text will render as underlined</u></p>
                <p><small>This line of text is meant to be treated as fine print.</small></p>
                <p><strong>This line rendered as bold text.</strong></p>
                <p><em>This line rendered as italicized text.</em></p>
              </div>

              <div>
                <p><abbr title="attribute">attr</abbr></p>
                <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
              </div>

              <blockquote class="blockquote">
                <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
              </blockquote>

              <blockquote class="blockquote">
                <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
                <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite>
                </footer>
              </blockquote>

              <blockquote class="blockquote text-center">
                <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
                <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite>
                </footer>
              </blockquote>

              <blockquote class="blockquote text-right">
                <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
                <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite>
                </footer>
              </blockquote>

              <ul class="list-unstyled">
                <li>This is a list.</li>
                <li>It appears completely unstyled.</li>
                <li>Structurally, it's still a list.</li>
                <li>However, this style only applies to immediate child elements.</li>
                <li>Nested lists:
                  <ul>
                    <li>are unaffected by this style</li>
                    <li>will still show a bullet</li>
                    <li>and have appropriate left margin</li>
                  </ul>
                </li>
                <li>This may still come in handy in some situations.</li>
              </ul>

              <ul class="list-inline">
                <li class="list-inline-item">This is a list item.</li>
                <li class="list-inline-item">And another one.</li>
                <li class="list-inline-item">But they're displayed inline.</li>
              </ul>

              <dl class="row">
                <dt class="col-sm-3">Description lists</dt>
                <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

                <dt class="col-sm-3">Term</dt>
                <dd class="col-sm-9">
                  <p>Definition for the term.</p>
                  <p>And some more placeholder definition text.</p>
                </dd>

                <dt class="col-sm-3">Another term</dt>
                <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>

                <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
                <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>

                <dt class="col-sm-3">Nesting</dt>
                <dd class="col-sm-9">
                  <dl class="row">
                    <dt class="col-sm-4">Nested definition list</dt>
                    <dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your
                      definition list.
                    </dd>
                  </dl>
                </dd>
              </dl>
            </div>
            <div class="pre">
              <ol>
                <li>看demo源码</li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
        </div>

        <div id="container">
          <div class="page_tit">容器</div>
          <div class="table_row">
            <div class="page_tit2">容器是最基本的布局元素，在使用默认网格系统时是必需的。容器用于容纳、填充和（有时）居中放置内容。虽然可以嵌套容器，但大多数布局不需要嵌套容器。</div>
            <div class="page_tit3">
              .container，它在每个响应断点处设置最大宽度
            </div>
            <div class="page_tit3">
              .container-fluid，宽度：所有断点处为100%
            </div>
            <div class="page_tit3">
              .container-{breakpoint}，在指定断点之前的宽度为100%
            </div>
            <table class="vt-table">
              <thead>
                <tr>
                  <th></th>
                  <th>
                    超小型<br>
                    <span class="font-weight-normal">&lt;576px</span>
                  </th>
                  <th>
                    小型<br>
                    <span class="font-weight-normal">≥576px</span>
                  </th>
                  <th>
                    中型<br>
                    <span class="font-weight-normal">≥768px</span>
                  </th>
                  <th>
                    大型<br>
                    <span class="font-weight-normal">≥992px</span>
                  </th>
                  <th>
                    超大型<br>
                    <span class="font-weight-normal">≥1200px</span>
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><code>.container</code></td>
                  <td class="text-muted">100%</td>
                  <td>540px</td>
                  <td>720px</td>
                  <td>960px</td>
                  <td>1140px</td>
                </tr>
                <tr>
                  <td><code>.container-sm</code></td>
                  <td class="text-muted">100%</td>
                  <td>540px</td>
                  <td>720px</td>
                  <td>960px</td>
                  <td>1140px</td>
                </tr>
                <tr>
                  <td><code>.container-md</code></td>
                  <td class="text-muted">100%</td>
                  <td class="text-muted">100%</td>
                  <td>720px</td>
                  <td>960px</td>
                  <td>1140px</td>
                </tr>
                <tr>
                  <td><code>.container-lg</code></td>
                  <td class="text-muted">100%</td>
                  <td class="text-muted">100%</td>
                  <td class="text-muted">100%</td>
                  <td>960px</td>
                  <td>1140px</td>
                </tr>
                <tr>
                  <td><code>.container-xl</code></td>
                  <td class="text-muted">100%</td>
                  <td class="text-muted">100%</td>
                  <td class="text-muted">100%</td>
                  <td class="text-muted">100%</td>
                  <td>1140px</td>
                </tr>
                <tr>
                  <td><code>.container-fluid</code></td>
                  <td class="text-muted">100%</td>
                  <td class="text-muted">100%</td>
                  <td class="text-muted">100%</td>
                  <td class="text-muted">100%</td>
                  <td class="text-muted">100%</td>
                </tr>
              </tbody>
            </table>
            <div class="example">
              <div class="container">
                container
              </div>
              <div class="container-fluid">
                container-fluid
              </div>
              <div class="container-sm">container-sm, 100% wide until small breakpoint</div>
              <div class="container-md">container-md, 100% wide until medium breakpoint</div>
              <div class="container-lg">container-lg, 100% wide until large breakpoint</div>
              <div class="container-xl">container-xl, 100% wide until extra large breakpoint</div>
            </div>
            <div class="pre">
              <ol>
                <li><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span
                    class="o">=</span><span class="s">"container"</span><span class="p">&gt;</span>
                  <span class="c">&lt;!-- Content here --&gt;</span>
                  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
                </li>
                <li><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span
                    class="o">=</span><span class="s">"container-fluid"</span><span class="p">&gt;</span>
                  ...
                  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
                </li>
                <li><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span
                    class="o">=</span><span class="s">"container-sm"</span><span class="p">&gt;</span>100% wide until
                  small breakpoint<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
                  <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span
                    class="o">=</span><span class="s">"container-md"</span><span class="p">&gt;</span>100% wide until
                  medium breakpoint<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
                  <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span
                    class="o">=</span><span class="s">"container-lg"</span><span class="p">&gt;</span>100% wide until
                  large breakpoint<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
                  <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span
                    class="o">=</span><span class="s">"container-xl"</span><span class="p">&gt;</span>100% wide until
                  extra large breakpoint<span class="p">&lt;/</span><span class="nt">div</span><span
                    class="p">&gt;</span>
                </li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
        </div>

        <div id="grid">
          <div class="page_tit">栅格系统</div>
          <div class="table_row">
            <div class="page_tit2">提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。</div>
            <div class="page_tit3">是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的类吧，即 .col-xs-* 和 .col-md-*。</div>
            <div class="page_tit3">通过使用针对平板设备的 .col-sm-* 类，我们来创建更加动态和强大的布局。</div>
            <div class="page_tit3">使用 .offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。包括对所有五个网格层的1到12的支持。
            </div>
            <div class="page_tit3">使用 .order-* 类控制内容的视觉顺序。这些类是响应性的，因此可以按断点设置顺序（例如，.order-1
              .order-md-2）。包括对所有五个网格层的1到12的支持。</div>
            <div class="example">
              <div class="row">
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
              </div>
              <div class="row">
                <div class="col-md-8">.col-md-8</div>
                <div class="col-md-4">.col-md-4</div>
              </div>
              <div class="row">
                <div class="col-md-4">.col-md-4</div>
                <div class="col-md-4">.col-md-4</div>
                <div class="col-md-4">.col-md-4</div>
              </div>
              <div class="row">
                <div class="col-md-6">.col-md-6</div>
                <div class="col-md-6">.col-md-6</div>
              </div>
            </div>
            <div class="pre">
              <ol>
                <li><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span
                    class="nt">&gt;</span></li>
                <li><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span
                    class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span></li>
                <li><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span
                    class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span></li>
                <li><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span
                    class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span></li>
                <li><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span
                    class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span></li>
                <li><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span
                    class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span></li>
                <li><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span
                    class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span></li>
                <li><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span
                    class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span></li>
                <li><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span
                    class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span></li>
                <li><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span
                    class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span></li>
                <li><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span
                    class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span></li>
                <li><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span
                    class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span></li>
                <li><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span
                    class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span></li>
                <li><span class="nt">&lt;/div&gt;</span></li>
                <li><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span
                    class="nt">&gt;</span></li>
                <li><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-8"</span><span
                    class="nt">&gt;</span>.col-md-8<span class="nt">&lt;/div&gt;</span></li>
                <li><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span
                    class="nt">&gt;</span>.col-md-4<span class="nt">&lt;/div&gt;</span></li>
                <li><span class="nt">&lt;/div&gt;</span></li>
                <li><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span
                    class="nt">&gt;</span></li>
                <li><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span
                    class="nt">&gt;</span>.col-md-4<span class="nt">&lt;/div&gt;</span></li>
                <li><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span
                    class="nt">&gt;</span>.col-md-4<span class="nt">&lt;/div&gt;</span></li>
                <li><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span
                    class="nt">&gt;</span>.col-md-4<span class="nt">&lt;/div&gt;</span></li>
                <li><span class="nt">&lt;/div&gt;</span></li>
                <li><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span
                    class="nt">&gt;</span></li>
                <li><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span
                    class="nt">&gt;</span>.col-md-6<span class="nt">&lt;/div&gt;</span></li>
                <li><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span
                    class="nt">&gt;</span>.col-md-6<span class="nt">&lt;/div&gt;</span></li>
                <li><span class="nt">&lt;/div&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->
        </div>

        <div id="layout" class="maindiv">
          <div class="page_tit">布局 Layout</div>
          <div class="table_row">
            <div class="page_tit3">.vt-layout | .vt-layout-header | .vt-layout-content | .vt-layout-footer |
              .vt-layout-sider</div>
            <div class="example">
              <div class="vt-layout-single">
                <div class="vt-layout">
                  <div class="layout-header vt-layout-header">Header</div>
                  <div class="layout-content vt-layout-content">Content</div>
                  <div class="layout-footer vt-layout-footer">Footer</div>
                </div>
              </div>

              <div class="vt-layout-single">
                <div class="vt-layout">
                  <div class="layout-header vt-layout-header">Header</div>
                  <div class="vt-layout vt-layout-has-sider">
                    <div class="layout-sider vt-layout-sider"
                      style="width: 200px; min-width: 200px; max-width: 200px; flex: 0 0 200px;">
                      <div class="vt-layout-sider-children">Sider</div>
                    </div>
                    <div class="layout-content vt-layout-content">Content</div>
                  </div>
                  <div class="layout-footer vt-layout-footer">Footer</div>
                </div>
              </div>

              <div class="vt-layout-single">
                <div class="vt-layout">
                  <div class="layout-header vt-layout-header">Header</div>
                  <div class="vt-layout vt-layout-has-sider">
                    <div class="layout-content vt-layout-content">Content</div>
                    <div class="layout-sider vt-layout-sider"
                      style="width: 200px; min-width: 200px; max-width: 200px; flex: 0 0 200px;">
                      <div class="vt-layout-sider-children">Sider</div>
                    </div>
                  </div>
                  <div class="layout-footer vt-layout-footer">Footer</div>
                </div>
              </div>

              <div class="vt-layout-single">
                <div class="vt-layout vt-layout-has-sider">
                  <div class="layout-sider vt-layout-sider"
                    style="width: 200px; min-width: 200px; max-width: 200px; flex: 0 0 200px; line-height: 253px;">
                    <div class="vt-layout-sider-children">Sider</div>
                  </div>
                  <div class="vt-layout">
                    <div class="layout-header vt-layout-header">Header</div>
                    <div class="layout-content vt-layout-content">Content</div>
                    <div class="layout-footer vt-layout-footer">Footer</div>
                  </div>
                </div>
              </div>

            </div>
            <div class="pre">
              <ol>
                <li>看demo源码</li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
        </div>

        <div id="animate" class="maindiv">
          <div class="page_tit">动画 animate</div>
          <div class="table_row">
            <div class="page_tit2">基础 .vt-animated</div>
            <div class="page_tit3">原 .animate__ 开头，统一更换为 .vt- 开头</div>
            <div class="page_tit3">详细参考：animate.css的<a href="https://animate.style/" target="_blank">英文文档</a></div>
            <div class="example">
              <div class="vt-animated vt-zoomInDown">
                animate
              </div>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;div class=&quot;vt-animated vt-zoomInDown&quot;&gt;&lt;/div&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
        </div>

        <div id="iconfont" class="maindiv">
          <div class="page_tit">字体 ICONFONT</div>
          <div class="table_row">
            <div class="page_tit2">font样式&lt;i class=&quot;vt-iconfont icon-<span>【font class名】</span>&quot;&gt;</div>
            <div class="example">
              <div class="vt-file"><input type="file" /><span><i class="vt-iconfont icon-help"></i>font样式</span>
              </div>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;div class="vt-file"&gt;</span></li>
                <li class="level2"><span>&lt;input type=&quot;file&quot; /&gt;</span></li>
                <li class="level2"><span>&lt;span&gt;<span>&lt;i
                      class="vt-iconfont icon-bangzhu"&gt;&lt;/i&gt;</span>font样式&lt;/span&gt;</span></li>
                <li><span>&lt;/div&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->
          <div class="table_row">
            <ul class="icon_lists dib-box">

              <li class="dib">
                <span class="icon vt-iconfont icon-aixin"></span>
                <div class="name">
                  aixin
                </div>
                <div class="code-name">.icon-aixin
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-caidan"></span>
                <div class="name">
                  caidan
                </div>
                <div class="code-name">.icon-caidan
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-ditu"></span>
                <div class="name">
                  ditu
                </div>
                <div class="code-name">.icon-ditu
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-huiyuan"></span>
                <div class="name">
                  huiyuan
                </div>
                <div class="code-name">.icon-huiyuan
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-pengyouquan"></span>
                <div class="name">
                  pengyouquan
                </div>
                <div class="code-name">.icon-pengyouquan
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-shandian"></span>
                <div class="name">
                  shandian
                </div>
                <div class="code-name">.icon-shandian
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-weixin"></span>
                <div class="name">
                  weixin
                </div>
                <div class="code-name">.icon-weixin
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-youhuiquan"></span>
                <div class="name">
                  youhuiquan
                </div>
                <div class="code-name">.icon-youhuiquan
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-zhiwen"></span>
                <div class="name">
                  zhiwen
                </div>
                <div class="code-name">.icon-zhiwen
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-aixin1"></span>
                <div class="name">
                  aixin1
                </div>
                <div class="code-name">.icon-aixin1
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-huiyuan1"></span>
                <div class="name">
                  huiyuan1
                </div>
                <div class="code-name">.icon-huiyuan1
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-shandian1"></span>
                <div class="name">
                  shandian1
                </div>
                <div class="code-name">.icon-shandian1
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-remen"></span>
                <div class="name">
                  remen
                </div>
                <div class="code-name">.icon-remen
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-refresh"></span>
                <div class="name">
                  refresh
                </div>
                <div class="code-name">.icon-refresh
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-run-up"></span>
                <div class="name">
                  run-up
                </div>
                <div class="code-name">.icon-run-up
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-picture"></span>
                <div class="name">
                  picture
                </div>
                <div class="code-name">.icon-picture
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-run-in"></span>
                <div class="name">
                  run-in
                </div>
                <div class="code-name">.icon-run-in
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-pin"></span>
                <div class="name">
                  pin
                </div>
                <div class="code-name">.icon-pin
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-save"></span>
                <div class="name">
                  save
                </div>
                <div class="code-name">.icon-save
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-search"></span>
                <div class="name">
                  search
                </div>
                <div class="code-name">.icon-search
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-share"></span>
                <div class="name">
                  share
                </div>
                <div class="code-name">.icon-share
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-scanning"></span>
                <div class="name">
                  scanning
                </div>
                <div class="code-name">.icon-scanning
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-security"></span>
                <div class="name">
                  security
                </div>
                <div class="code-name">.icon-security
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-sign-out"></span>
                <div class="name">
                  sign-out
                </div>
                <div class="code-name">.icon-sign-out
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-select"></span>
                <div class="name">
                  select
                </div>
                <div class="code-name">.icon-select
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-stop"></span>
                <div class="name">
                  stop
                </div>
                <div class="code-name">.icon-stop
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-success"></span>
                <div class="name">
                  success
                </div>
                <div class="code-name">.icon-success
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-smile"></span>
                <div class="name">
                  smile
                </div>
                <div class="code-name">.icon-smile
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-switch"></span>
                <div class="name">
                  switch
                </div>
                <div class="code-name">.icon-switch
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-setting"></span>
                <div class="name">
                  setting
                </div>
                <div class="code-name">.icon-setting
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-survey"></span>
                <div class="name">
                  survey
                </div>
                <div class="code-name">.icon-survey
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-task"></span>
                <div class="name">
                  task
                </div>
                <div class="code-name">.icon-task
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-skip"></span>
                <div class="name">
                  skip
                </div>
                <div class="code-name">.icon-skip
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-text"></span>
                <div class="name">
                  text
                </div>
                <div class="code-name">.icon-text
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-time"></span>
                <div class="name">
                  time
                </div>
                <div class="code-name">.icon-time
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-telephone-out"></span>
                <div class="name">
                  telephone-out
                </div>
                <div class="code-name">.icon-telephone-out
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-toggle-left"></span>
                <div class="name">
                  toggle-left
                </div>
                <div class="code-name">.icon-toggle-left
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-toggle-right"></span>
                <div class="name">
                  toggle-right
                </div>
                <div class="code-name">.icon-toggle-right
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-telephone"></span>
                <div class="name">
                  telephone
                </div>
                <div class="code-name">.icon-telephone
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-top"></span>
                <div class="name">
                  top
                </div>
                <div class="code-name">.icon-top
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-unlock"></span>
                <div class="name">
                  unlock
                </div>
                <div class="code-name">.icon-unlock
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-user"></span>
                <div class="name">
                  user
                </div>
                <div class="code-name">.icon-user
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-upload"></span>
                <div class="name">
                  upload
                </div>
                <div class="code-name">.icon-upload
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-work"></span>
                <div class="name">
                  work
                </div>
                <div class="code-name">.icon-work
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-training"></span>
                <div class="name">
                  training
                </div>
                <div class="code-name">.icon-training
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-warning"></span>
                <div class="name">
                  warning
                </div>
                <div class="code-name">.icon-warning
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-zoom-in"></span>
                <div class="name">
                  zoom-in
                </div>
                <div class="code-name">.icon-zoom-in
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-zoom-out"></span>
                <div class="name">
                  zoom-out
                </div>
                <div class="code-name">.icon-zoom-out
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-add-bold"></span>
                <div class="name">
                  add-bold
                </div>
                <div class="code-name">.icon-add-bold
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-arrow-left-bold"></span>
                <div class="name">
                  arrow-left-bold
                </div>
                <div class="code-name">.icon-arrow-left-bold
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-arrow-up-bold"></span>
                <div class="name">
                  arrow-up-bold
                </div>
                <div class="code-name">.icon-arrow-up-bold
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-close-bold"></span>
                <div class="name">
                  close-bold
                </div>
                <div class="code-name">.icon-close-bold
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-arrow-down-bold"></span>
                <div class="name">
                  arrow-down-bold
                </div>
                <div class="code-name">.icon-arrow-down-bold
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-minus-bold"></span>
                <div class="name">
                  minus-bold
                </div>
                <div class="code-name">.icon-minus-bold
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-arrow-right-bold"></span>
                <div class="name">
                  arrow-right-bold
                </div>
                <div class="code-name">.icon-arrow-right-bold
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-select-bold"></span>
                <div class="name">
                  select-bold
                </div>
                <div class="code-name">.icon-select-bold
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-arrow-up-filling"></span>
                <div class="name">
                  arrow-up-filling
                </div>
                <div class="code-name">.icon-arrow-up-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-arrow-down-filling"></span>
                <div class="name">
                  arrow-down-filling
                </div>
                <div class="code-name">.icon-arrow-down-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-arrow-left-filling"></span>
                <div class="name">
                  arrow-left-filling
                </div>
                <div class="code-name">.icon-arrow-left-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-arrow-right-filling"></span>
                <div class="name">
                  arrow-right-filling
                </div>
                <div class="code-name">.icon-arrow-right-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-caps-unlock-filling"></span>
                <div class="name">
                  caps-unlock-filling
                </div>
                <div class="code-name">.icon-caps-unlock-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-comment-filling"></span>
                <div class="name">
                  comment-filling
                </div>
                <div class="code-name">.icon-comment-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-check-item-filling"></span>
                <div class="name">
                  check-item-filling
                </div>
                <div class="code-name">.icon-check-item-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-clock-filling"></span>
                <div class="name">
                  clock-filling
                </div>
                <div class="code-name">.icon-clock-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-delete-filling"></span>
                <div class="name">
                  delete-filling
                </div>
                <div class="code-name">.icon-delete-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-decline-filling"></span>
                <div class="name">
                  decline-filling
                </div>
                <div class="code-name">.icon-decline-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-dynamic-filling"></span>
                <div class="name">
                  dynamic-filling
                </div>
                <div class="code-name">.icon-dynamic-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-intermediate-filling"></span>
                <div class="name">
                  intermediate-filling
                </div>
                <div class="code-name">.icon-intermediate-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-favorite-filling"></span>
                <div class="name">
                  favorite-filling
                </div>
                <div class="code-name">.icon-favorite-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-layout-filling"></span>
                <div class="name">
                  layout-filling
                </div>
                <div class="code-name">.icon-layout-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-help-filling"></span>
                <div class="name">
                  help-filling
                </div>
                <div class="code-name">.icon-help-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-history-filling"></span>
                <div class="name">
                  history-filling
                </div>
                <div class="code-name">.icon-history-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-filter-filling"></span>
                <div class="name">
                  filter-filling
                </div>
                <div class="code-name">.icon-filter-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-file-common-filling"></span>
                <div class="name">
                  file-common-filling
                </div>
                <div class="code-name">.icon-file-common-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-news-filling"></span>
                <div class="name">
                  news-filling
                </div>
                <div class="code-name">.icon-news-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-edit-filling"></span>
                <div class="name">
                  edit-filling
                </div>
                <div class="code-name">.icon-edit-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-fullscreen-expand-filling"></span>
                <div class="name">
                  fullscreen-expand-filling
                </div>
                <div class="code-name">.icon-fullscreen-expand-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-smile-filling"></span>
                <div class="name">
                  smile-filling
                </div>
                <div class="code-name">.icon-smile-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-rise-filling"></span>
                <div class="name">
                  rise-filling
                </div>
                <div class="code-name">.icon-rise-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-picture-filling"></span>
                <div class="name">
                  picture-filling
                </div>
                <div class="code-name">.icon-picture-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-notification-filling"></span>
                <div class="name">
                  notification-filling
                </div>
                <div class="code-name">.icon-notification-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-user-filling"></span>
                <div class="name">
                  user-filling
                </div>
                <div class="code-name">.icon-user-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-setting-filling"></span>
                <div class="name">
                  setting-filling
                </div>
                <div class="code-name">.icon-setting-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-switch-filling"></span>
                <div class="name">
                  switch-filling
                </div>
                <div class="code-name">.icon-switch-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-work-filling"></span>
                <div class="name">
                  work-filling
                </div>
                <div class="code-name">.icon-work-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-task-filling"></span>
                <div class="name">
                  task-filling
                </div>
                <div class="code-name">.icon-task-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-success-filling"></span>
                <div class="name">
                  success-filling
                </div>
                <div class="code-name">.icon-success-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-warning-filling"></span>
                <div class="name">
                  warning-filling
                </div>
                <div class="code-name">.icon-warning-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-folder-filling"></span>
                <div class="name">
                  folder-filling
                </div>
                <div class="code-name">.icon-folder-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-map-filling"></span>
                <div class="name">
                  map-filling
                </div>
                <div class="code-name">.icon-map-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-prompt-filling"></span>
                <div class="name">
                  prompt-filling
                </div>
                <div class="code-name">.icon-prompt-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-meh-filling"></span>
                <div class="name">
                  meh-filling
                </div>
                <div class="code-name">.icon-meh-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-cry-filling"></span>
                <div class="name">
                  cry-filling
                </div>
                <div class="code-name">.icon-cry-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-top-filling"></span>
                <div class="name">
                  top-filling
                </div>
                <div class="code-name">.icon-top-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-home-filling"></span>
                <div class="name">
                  home-filling
                </div>
                <div class="code-name">.icon-home-filling
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-sorting"></span>
                <div class="name">
                  sorting
                </div>
                <div class="code-name">.icon-sorting
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-3column"></span>
                <div class="name">
                  column-3
                </div>
                <div class="code-name">.icon-3column
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-column-4"></span>
                <div class="name">
                  column-4
                </div>
                <div class="code-name">.icon-column-4
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-add"></span>
                <div class="name">
                  add
                </div>
                <div class="code-name">.icon-add
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-add-circle"></span>
                <div class="name">
                  add-circle
                </div>
                <div class="code-name">.icon-add-circle
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-adjust"></span>
                <div class="name">
                  adjust
                </div>
                <div class="code-name">.icon-adjust
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-arrow-up-circle"></span>
                <div class="name">
                  arrow-up-circle
                </div>
                <div class="code-name">.icon-arrow-up-circle
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-arrow-right-circle"></span>
                <div class="name">
                  arrow-right-circle
                </div>
                <div class="code-name">.icon-arrow-right-circle
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-arrow-down"></span>
                <div class="name">
                  arrow-down
                </div>
                <div class="code-name">.icon-arrow-down
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-ashbin"></span>
                <div class="name">
                  ashbin
                </div>
                <div class="code-name">.icon-ashbin
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-arrow-right"></span>
                <div class="name">
                  arrow-right
                </div>
                <div class="code-name">.icon-arrow-right
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-browse"></span>
                <div class="name">
                  browse
                </div>
                <div class="code-name">.icon-browse
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-bottom"></span>
                <div class="name">
                  bottom
                </div>
                <div class="code-name">.icon-bottom
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-back"></span>
                <div class="name">
                  back
                </div>
                <div class="code-name">.icon-back
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-bad"></span>
                <div class="name">
                  bad
                </div>
                <div class="code-name">.icon-bad
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-arrow-double-left"></span>
                <div class="name">
                  arrow-double-left
                </div>
                <div class="code-name">.icon-arrow-double-left
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-arrow-left-circle"></span>
                <div class="name">
                  arrow-left-circle
                </div>
                <div class="code-name">.icon-arrow-left-circle
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-arrow-double-right"></span>
                <div class="name">
                  arrow-double-right
                </div>
                <div class="code-name">.icon-arrow-double-right
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-caps-lock"></span>
                <div class="name">
                  caps-lock
                </div>
                <div class="code-name">.icon-caps-lock
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-camera"></span>
                <div class="name">
                  camera
                </div>
                <div class="code-name">.icon-camera
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-chart-bar"></span>
                <div class="name">
                  chart-bar
                </div>
                <div class="code-name">.icon-chart-bar
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-attachment"></span>
                <div class="name">
                  attachment
                </div>
                <div class="code-name">.icon-attachment
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-code"></span>
                <div class="name">
                  code
                </div>
                <div class="code-name">.icon-code
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-close"></span>
                <div class="name">
                  close
                </div>
                <div class="code-name">.icon-close
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-check-item"></span>
                <div class="name">
                  check-item
                </div>
                <div class="code-name">.icon-check-item
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-calendar"></span>
                <div class="name">
                  calendar
                </div>
                <div class="code-name">.icon-calendar
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-comment"></span>
                <div class="name">
                  comment
                </div>
                <div class="code-name">.icon-comment
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-column-vertical"></span>
                <div class="name">
                  column-vertical
                </div>
                <div class="code-name">.icon-column-vertical
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-column-horizontal"></span>
                <div class="name">
                  column-horizontal
                </div>
                <div class="code-name">.icon-column-horizontal
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-complete"></span>
                <div class="name">
                  complete
                </div>
                <div class="code-name">.icon-complete
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-chart-pie"></span>
                <div class="name">
                  chart-pie
                </div>
                <div class="code-name">.icon-chart-pie
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-cry"></span>
                <div class="name">
                  cry
                </div>
                <div class="code-name">.icon-cry
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-customer-service"></span>
                <div class="name">
                  customer-service
                </div>
                <div class="code-name">.icon-customer-service
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-delete"></span>
                <div class="name">
                  delete
                </div>
                <div class="code-name">.icon-delete
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-direction-down"></span>
                <div class="name">
                  direction-down
                </div>
                <div class="code-name">.icon-direction-down
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-copy"></span>
                <div class="name">
                  copy
                </div>
                <div class="code-name">.icon-copy
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-cut"></span>
                <div class="name">
                  cut
                </div>
                <div class="code-name">.icon-cut
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-data-view"></span>
                <div class="name">
                  data-view
                </div>
                <div class="code-name">.icon-data-view
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-direction-down-circle"></span>
                <div class="name">
                  direction-down-circle
                </div>
                <div class="code-name">.icon-direction-down-circle
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-direction-right"></span>
                <div class="name">
                  direction-right
                </div>
                <div class="code-name">.icon-direction-right
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-direction-up"></span>
                <div class="name">
                  direction-up
                </div>
                <div class="code-name">.icon-direction-up
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-discount"></span>
                <div class="name">
                  discount
                </div>
                <div class="code-name">.icon-discount
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-direction-left"></span>
                <div class="name">
                  direction-left
                </div>
                <div class="code-name">.icon-direction-left
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-download"></span>
                <div class="name">
                  download
                </div>
                <div class="code-name">.icon-download
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-electronics"></span>
                <div class="name">
                  electronics
                </div>
                <div class="code-name">.icon-electronics
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-drag"></span>
                <div class="name">
                  drag
                </div>
                <div class="code-name">.icon-drag
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-elipsis"></span>
                <div class="name">
                  elipsis
                </div>
                <div class="code-name">.icon-elipsis
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-export"></span>
                <div class="name">
                  export
                </div>
                <div class="code-name">.icon-export
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-explain"></span>
                <div class="name">
                  explain
                </div>
                <div class="code-name">.icon-explain
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-edit"></span>
                <div class="name">
                  edit
                </div>
                <div class="code-name">.icon-edit
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-eye-close"></span>
                <div class="name">
                  eye-close
                </div>
                <div class="code-name">.icon-eye-close
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-email"></span>
                <div class="name">
                  email
                </div>
                <div class="code-name">.icon-email
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-error"></span>
                <div class="name">
                  error
                </div>
                <div class="code-name">.icon-error
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-favorite"></span>
                <div class="name">
                  favorite
                </div>
                <div class="code-name">.icon-favorite
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-file-common"></span>
                <div class="name">
                  file-common
                </div>
                <div class="code-name">.icon-file-common
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-file-delete"></span>
                <div class="name">
                  file-delete
                </div>
                <div class="code-name">.icon-file-delete
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-file-add"></span>
                <div class="name">
                  file-add
                </div>
                <div class="code-name">.icon-file-add
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-film"></span>
                <div class="name">
                  film
                </div>
                <div class="code-name">.icon-film
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-fabulous"></span>
                <div class="name">
                  fabulous
                </div>
                <div class="code-name">.icon-fabulous
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-file"></span>
                <div class="name">
                  file
                </div>
                <div class="code-name">.icon-file
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-folder-close"></span>
                <div class="name">
                  folder-close
                </div>
                <div class="code-name">.icon-folder-close
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-filter"></span>
                <div class="name">
                  filter
                </div>
                <div class="code-name">.icon-filter
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-good"></span>
                <div class="name">
                  good
                </div>
                <div class="code-name">.icon-good
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-hide"></span>
                <div class="name">
                  hide
                </div>
                <div class="code-name">.icon-hide
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-home"></span>
                <div class="name">
                  home
                </div>
                <div class="code-name">.icon-home
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-history"></span>
                <div class="name">
                  history
                </div>
                <div class="code-name">.icon-history
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-file-open"></span>
                <div class="name">
                  file-open
                </div>
                <div class="code-name">.icon-file-open
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-forward"></span>
                <div class="name">
                  forward
                </div>
                <div class="code-name">.icon-forward
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-import"></span>
                <div class="name">
                  import
                </div>
                <div class="code-name">.icon-import
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-image-text"></span>
                <div class="name">
                  image-text
                </div>
                <div class="code-name">.icon-image-text
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-keyboard-26"></span>
                <div class="name">
                  keyboard-26
                </div>
                <div class="code-name">.icon-keyboard-26
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-keyboard-9"></span>
                <div class="name">
                  keyboard-9
                </div>
                <div class="code-name">.icon-keyboard-9
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-link"></span>
                <div class="name">
                  link
                </div>
                <div class="code-name">.icon-link
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-layout"></span>
                <div class="name">
                  layout
                </div>
                <div class="code-name">.icon-layout
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-fullscreen-shrink"></span>
                <div class="name">
                  fullscreen-shrink
                </div>
                <div class="code-name">.icon-fullscreen-shrink
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-layers"></span>
                <div class="name">
                  layers
                </div>
                <div class="code-name">.icon-layers
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-lock"></span>
                <div class="name">
                  lock
                </div>
                <div class="code-name">.icon-lock
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-fullscreen-expand"></span>
                <div class="name">
                  fullscreen-expand
                </div>
                <div class="code-name">.icon-fullscreen-expand
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-map"></span>
                <div class="name">
                  map
                </div>
                <div class="code-name">.icon-map
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-meh"></span>
                <div class="name">
                  meh
                </div>
                <div class="code-name">.icon-meh
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-menu"></span>
                <div class="name">
                  menu
                </div>
                <div class="code-name">.icon-menu
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-loading"></span>
                <div class="name">
                  loading
                </div>
                <div class="code-name">.icon-loading
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-help"></span>
                <div class="name">
                  help
                </div>
                <div class="code-name">.icon-help
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-minus-circle"></span>
                <div class="name">
                  minus-circle
                </div>
                <div class="code-name">.icon-minus-circle
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-modular"></span>
                <div class="name">
                  modular
                </div>
                <div class="code-name">.icon-modular
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-notification"></span>
                <div class="name">
                  notification
                </div>
                <div class="code-name">.icon-notification
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-mic"></span>
                <div class="name">
                  mic
                </div>
                <div class="code-name">.icon-mic
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-more"></span>
                <div class="name">
                  more
                </div>
                <div class="code-name">.icon-more
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-pad"></span>
                <div class="name">
                  pad
                </div>
                <div class="code-name">.icon-pad
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-operation"></span>
                <div class="name">
                  operation
                </div>
                <div class="code-name">.icon-operation
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-play"></span>
                <div class="name">
                  play
                </div>
                <div class="code-name">.icon-play
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-print"></span>
                <div class="name">
                  print
                </div>
                <div class="code-name">.icon-print
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-mobile-phone"></span>
                <div class="name">
                  mobile-phone
                </div>
                <div class="code-name">.icon-mobile-phone
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-minus"></span>
                <div class="name">
                  minus
                </div>
                <div class="code-name">.icon-minus
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-navigation"></span>
                <div class="name">
                  navigation
                </div>
                <div class="code-name">.icon-navigation
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-pdf"></span>
                <div class="name">
                  pdf
                </div>
                <div class="code-name">.icon-pdf
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-prompt"></span>
                <div class="name">
                  prompt
                </div>
                <div class="code-name">.icon-prompt
                </div>
              </li>

              <li class="dib">
                <span class="icon vt-iconfont icon-move"></span>
                <div class="name">
                  move
                </div>
                <div class="code-name">.icon-move
                </div>
              </li>

            </ul>
          </div>
        </div>

        <div id="charts">
          <div class="page_tit">charts</div>
          <div class="table_row">
            <div class="page_tit3">.vt-charts 以下按DEMO顺序使用</div>
            <div class="page_tit3">.vt-charts column</div>
            <div class="page_tit3">.vt-charts bar</div>
            <div class="page_tit3">.vt-charts area</div>
            <div class="page_tit3">.vt-charts line</div>
            <div class="page_tit3">详细查看：参考charts.css的<a href="https://chartscss.org/components/"
                target="_blank">英文文档</a></div>
            <div class="example row">
              <table class="col-md-6 vt-charts column multiple stacked" style="height:200px;width:300px">
                <caption> Front End Developer Salary </caption>
                <tbody>
                  <tr>
                    <td style="--size: calc( 10 / 100 )"> $10K <span class="tooltip"> Data: 10 <br> More info... </span>
                    </td>
                    <td style="--size: calc( 20 / 100 )"> $20K <span class="tooltip"> Data: 10 <br> More info... </span>
                    </td>
                    <td style="--size: calc( 10 / 100 )"> $10K <span class="tooltip"> Data: 10 <br> More info... </span>
                    </td>
                    <td style="--size: calc( 40 / 100 )"> $40K <span class="tooltip"> Data: 10 <br> More info... </span>
                    </td>
                  </tr>
                  <tr>
                    <td style="--size: calc( 60 / 100 )"> $60K <span class="tooltip"> Data: 10 <br> More info... </span>
                    </td>
                  </tr>
                  <tr>
                    <td style="--size: calc( 35 / 100 )"> $35K <span class="tooltip"> Data: 10 <br> More info... </span>
                    </td>
                    <td style="--size: calc( 15 / 100 )"> $15K <span class="tooltip"> Data: 10 <br> More info... </span>
                    </td>
                    <td style="--size: calc( 35 / 100 )"> $35K <span class="tooltip"> Data: 10 <br> More info... </span>
                    </td>
                  </tr>
                  <tr>
                    <td style="--size: calc( 90 / 100 )"> $90K <span class="tooltip"> Data: 10 <br> More info... </span>
                    </td>
                  </tr>
                  <tr>
                    <td style="--size: calc( 100 / 100 )"> $100K <span class="tooltip"> Data: 10 <br> More info...
                      </span></td>
                  </tr>
                </tbody>
              </table>
              <table class="col-md-6 vt-charts bar multiple stacked" style="height:200px;width:300px">
                <caption> Front End Developer Salary </caption>
                <tbody>
                  <tr>
                    <td style="--size: calc( 40 / 100 )"> $40K <span class="tooltip"> Data: 10 <br> More info... </span>
                    </td>
                    <td style="--size: calc( 20 / 100 )"> $40K <span class="tooltip"> Data: 10 <br> More info... </span>
                    </td>
                    <td style="--size: calc( 10 / 100 )"> $40K <span class="tooltip"> Data: 10 <br> More info... </span>
                    </td>
                  </tr>
                  <tr>
                    <td style="--size: calc( 60 / 100 )"> $60K <span class="tooltip"> Data: 10 <br> More info... </span>
                    </td>
                  </tr>
                  <tr>
                    <td style="--size: calc( 75 / 100 )"> $75K <span class="tooltip"> Data: 10 <br> More info... </span>
                    </td>
                  </tr>
                  <tr>
                    <td style="--size: calc( 90 / 100 )"> $90K <span class="tooltip"> Data: 10 <br> More info... </span>
                    </td>
                  </tr>
                  <tr>
                    <td style="--size: calc( 100 / 100 )"> $100K <span class="tooltip"> Data: 10 <br> More info...
                      </span></td>
                  </tr>
                </tbody>
              </table>
              <table class="col-md-6 vt-charts area hide-data" style="height:200px;width:300px">
                <caption> Front End Developer Salary </caption>
                <tbody>
                  <tr>
                    <td style="--start: 0.2; --size: 0.4"> <span class="data"> $40K </span><span class="tooltip"> Data:
                        10 <br> More info... </span> </td>
                  </tr>
                  <tr>
                    <td style="--start: 0.4; --size: 0.8"> <span class="data"> $80K </span><span class="tooltip"> Data:
                        10 <br> More info... </span> </td>
                  </tr>
                  <tr>
                    <td style="--start: 0.8; --size: 0.6"> <span class="data"> $60K </span><span class="tooltip"> Data:
                        10 <br> More info... </span> </td>
                  </tr>
                  <tr>
                    <td style="--start: 0.6; --size: 1.0"> <span class="data"> $100K </span><span class="tooltip"> Data:
                        10 <br> More info... </span> </td>
                  </tr>
                  <tr>
                    <td style="--start: 1.0; --size: 0.3"> <span class="data"> $30K </span><span class="tooltip"> Data:
                        10 <br> More info... </span> </td>
                  </tr>
                </tbody>
              </table>
              <table class="col-md-6 vt-charts line" style="height:200px;width:300px">
                <caption> Front End Developer Salary </caption>
                <tbody>
                  <tr>
                    <td style="--start: 0.0; --size: 0.4"> <span class="data"> $ 40K </span> <span class="tooltip">
                        Data: 10 <br> More info... </span></td>
                  </tr>
                  <tr>
                    <td style="--start: 0.4; --size: 0.2"> <span class="data"> $ 20K </span><span class="tooltip"> Data:
                        10 <br> More info... </span> </td>
                  </tr>
                  <tr>
                    <td style="--start: 0.2; --size: 0.6"> <span class="data"> $ 60K </span><span class="tooltip"> Data:
                        10 <br> More info... </span> </td>
                  </tr>
                  <tr>
                    <td style="--start: 0.6; --size: 0.4"> <span class="data"> $ 40K </span> <span class="tooltip">
                        Data: 10 <br> More info... </span></td>
                  </tr>
                  <tr>
                    <td style="--start: 0.4; --size: 0.8"> <span class="data"> $ 80K </span><span class="tooltip"> Data:
                        10 <br> More info... </span> </td>
                  </tr>
                  <tr>
                    <td style="--start: 0.8; --size: 0.6"> <span class="data"> $ 60K </span> <span class="tooltip">
                        Data: 10 <br> More info... </span></td>
                  </tr>
                  <tr>
                    <td style="--start: 0.6; --size: 1.0"> <span class="data"> $ 100K </span><span class="tooltip">
                        Data: 10 <br> More info... </span> </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="pre">
              <ol>
                <li>看demo源码</li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
        </div>

        <div id="card">
          <div class="page_tit">卡片</div>
          <div class="table_row">
            <div class="page_tit3">.vt-card</div>
            <div class="example" style="display:flex;">
              <div class="vt-card" style="width: 18rem;margin-right:10px;">
                <img src="./css/img.png" class="vt-card-img-top" alt="...">
                <div class="vt-card-body">
                  <h5 class="vt-card-title">vt-card title</h5>
                  <p class="vt-card-text">Some quick example text to build on the vt-card title and make up the bulk
                    of the
                    vt-card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>

              <div class="vt-card" style="width: 18rem;height:100px;margin-right:10px">
                <div class="vt-card-body">
                  This is some text within a card body.
                </div>
                <a href="#" class="vt-button">test</a>
              </div>

              <div class="vt-card" style="width: 18rem;height:200px;">
                <div class="vt-card-body">
                  <h5 class="vt-card-title">Card title</h5>
                  <h6 class="vt-card-subtitle mb-2 text-muted">Card subtitle</h6>
                  <p class="vt-card-text">Some quick example text to build on the card title and make up the bulk of
                    the card's content.</p>
                  <a href="#" class="vt-card-link">Card link</a>
                  <a href="#" class="vt-card-link">Another link</a>
                </div>
              </div>

            </div>
            <div class="pre">
              <ol>
                <li><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span
                    class="o">=</span><span class="s">"vt-card"</span> <span class="na">style</span><span
                    class="o">=</span><span class="s">"width: 18rem;"</span><span class="p">&gt;</span>
                  <span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span
                    class="o">=</span><span class="s">"..."</span> <span class="na">class</span><span
                    class="o">=</span><span class="s">"vt-card-img-top"</span> <span class="na">alt</span><span
                    class="o">=</span><span class="s">"..."</span><span class="p">&gt;</span>
                  <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span
                    class="o">=</span><span class="s">"vt-card-body"</span><span class="p">&gt;</span>
                  <span class="p">&lt;</span><span class="nt">h5</span> <span class="na">class</span><span
                    class="o">=</span><span class="s">"vt-card-title"</span><span class="p">&gt;</span>vt-card
                  title<span class="p">&lt;/</span><span class="nt">h5</span><span class="p">&gt;</span>
                  <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span
                    class="o">=</span><span class="s">"vt-card-text"</span><span class="p">&gt;</span>Some quick
                  example text to build on the vt-card title and make up the bulk of the vt-card's content.<span
                    class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
                  <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span
                    class="o">=</span><span class="s">"#"</span> <span class="na">class</span><span
                    class="o">=</span><span class="s">"btn btn-primary"</span><span class="p">&gt;</span>Go
                  somewhere<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
                  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
                  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
                </li>
              </ol>
            </div>
            <!--pre-->
          </div>
        </div>

        <div id="jumbotron">
          <div class="page_tit">巨幕</div>
          <div class="table_row">
            <div class="page_tit3">.vt-jumbotron</div>
            <div class="example">
              <div class="vt-jumbotron" style="display:block;margin-bottom:10px;">
                <h1 class="display-4">Hello, world!</h1>
                <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra
                  attention to featured content or information.</p>
                <hr class="my-4">
                <p>It uses utility classes for typography and spacing to space content out within the larger container.
                </p>
                <a class="vt-button vt-blue" href="#" role="button">Learn more</a>
              </div>

              <div class="vt-jumbotron vt-jumbotron-fluid">
                <div class="container">
                  <h1 class="display-4">Fluid jumbotron</h1>
                  <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.
                  </p>
                </div>
              </div>

            </div>
            <div class="pre">
              <ol>
                <li><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span
                    class="o">=</span><span class="s">"vt-jumbotron"</span><span class="p">&gt;</span>
                  <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span
                    class="o">=</span><span class="s">"display-4"</span><span class="p">&gt;</span>Hello, world!<span
                    class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
                  <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span
                    class="o">=</span><span class="s">"lead"</span><span class="p">&gt;</span>This is a simple hero
                  unit, a simple jumbotron-style component for calling extra attention to featured content or
                  information.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
                  <span class="p">&lt;</span><span class="nt">hr</span> <span class="na">class</span><span
                    class="o">=</span><span class="s">"my-4"</span><span class="p">&gt;</span>
                  <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>It uses utility classes
                  for typography and spacing to space content out within the larger container.<span
                    class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
                  <span class="p">&lt;</span><span class="nt">a</span> <span class="na">class</span><span
                    class="o">=</span><span class="s">"vt-button vt-blue"</span> <span class="na">href</span><span
                    class="o">=</span><span class="s">"#"</span> <span class="na">role</span><span
                    class="o">=</span><span class="s">"button"</span><span class="p">&gt;</span>Learn more<span
                    class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
                  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
                </li>
              </ol>
            </div>
            <!--pre-->
          </div>
        </div>

        <div id="list">
          <div class="page_tit">列表组</div>
          <div class="table_row">
            <div class="page_tit3">.vt-list-group</div>
            <div class="example">
              <ul class="vt-list-group" style="margin-bottom:10px;">
                <li class="vt-list-group-item disabled" aria-disabled="true">An item</li>
                <li class="vt-list-group-item active" aria-current="true">A second item</li>
                <li class="vt-list-group-item vt-list-group-item-action">A third item</li>
                <li class="vt-list-group-item">A fourth item</li>
                <li class="vt-list-group-item">And a fifth one</li>
              </ul>

              <div class="vt-list-group" style="margin-bottom:10px;">
                <button type="button" class="vt-list-group-item vt-list-group-item-action active" aria-current="true">
                  The current button
                </button>
                <button type="button" class="vt-list-group-item vt-list-group-item-action">A second item</button>
                <button type="button" class="vt-list-group-item vt-list-group-item-action">A third button
                  item</button>
                <button type="button" class="vt-list-group-item vt-list-group-item-action">A fourth button
                  item</button>
                <button type="button" class="vt-list-group-item vt-list-group-item-action" disabled>A disabled button
                  item</button>
              </div>

              <ul class="vt-list-group vt-list-group-flush" style="margin-bottom:10px;">
                <li class="vt-list-group-item disabled" aria-disabled="true">An item</li>
                <li class="vt-list-group-item active" aria-current="true">A second item</li>
                <li class="vt-list-group-item vt-list-group-item-action">A third item</li>
                <li class="vt-list-group-item">A fourth item</li>
                <li class="vt-list-group-item">And a fifth one</li>
              </ul>

              <ul class="vt-list-group vt-list-group-horizontal" style="margin-bottom:10px;">
                <li class="vt-list-group-item disabled" aria-disabled="true">An item</li>
                <li class="vt-list-group-item active" aria-current="true">A second item</li>
                <li class="vt-list-group-item vt-list-group-item-action">A third item</li>
                <li class="vt-list-group-item">A fourth item</li>
                <li class="vt-list-group-item">And a fifth one</li>
              </ul>

              <ul class="vt-list-group" style="margin-bottom:10px;">
                <li class="vt-list-group-item">A simple default list group item</li>
                <li class="vt-list-group-item vt-list-group-item-primary">A simple primary list group item</li>
                <li class="vt-list-group-item vt-list-group-item-secondary">A simple secondary list group item</li>
                <li class="vt-list-group-item vt-list-group-item-success">A simple success list group item</li>
                <li class="vt-list-group-item vt-list-group-item-danger">A simple danger list group item</li>
                <li class="vt-list-group-item vt-list-group-item-warning">A simple warning list group item</li>
                <li class="vt-list-group-item vt-list-group-item-info">A simple info list group item</li>
                <li class="vt-list-group-item vt-list-group-item-light">A simple light list group item</li>
                <li class="vt-list-group-item vt-list-group-item-dark">A simple dark list group item</li>
              </ul>

              <div class="vt-list-group" style="margin-bottom:10px;">
                <a href="#" class="vt-list-group-item vt-list-group-item-action active">
                  <div class="d-flex w-100 justify-content-between">
                    <h5 class="mb-1">List group item heading</h5>
                    <small>3 days ago</small>
                  </div>
                  <p class="mb-1">Some placeholder content in a paragraph.</p>
                  <small>And some small print.</small>
                </a>
                <a href="#" class="vt-list-group-item vt-list-group-item-action">
                  <div class="d-flex w-100 justify-content-between">
                    <h5 class="mb-1">List group item heading</h5>
                    <small class="text-muted">3 days ago</small>
                  </div>
                  <p class="mb-1">Some placeholder content in a paragraph.</p>
                  <small class="text-muted">And some muted small print.</small>
                </a>
                <a href="#" class="vt-list-group-item vt-list-group-item-action">
                  <div class="d-flex w-100 justify-content-between">
                    <h5 class="mb-1">List group item heading</h5>
                    <small class="text-muted">3 days ago</small>
                  </div>
                  <p class="mb-1">Some placeholder content in a paragraph.</p>
                  <small class="text-muted">And some muted small print.</small>
                </a>
              </div>

            </div>
            <div class="pre">
              <ol>
                <li>看demo源码
                </li>
              </ol>
            </div>
            <!--pre-->
          </div>
        </div>

        <div id="media">
          <div class="page_tit">媒体</div>
          <div class="table_row">
            <div class="page_tit3">.vt-media</div>
            <div class="example">
              <div class="vt-media" style="margin-bottom:10px">
                <img src="./css/img.png"
                  style="width:64px;height:64px;margin-right:10px;background-color: rgb(108, 117, 125)" alt="...">
                <div class="vt-media-body">
                  <h5 class="mt-0">vt-media heading</h5>
                  <p>Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's
                    beautiful, be the
                    judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our
                    love, angels are
                    crying from up above. Yeah, you take me to utopia.</p>
                </div>
              </div>

              <div class="vt-media" style="margin-bottom:10px">
                <img src="./css/img.png" class="align-self-start mr-3"
                  style="width:64px;height:64px;margin-right:10px;background-color: rgb(108, 117, 125)" alt="...">
                <div class="vt-media-body">
                  <h5 class="mt-0">Top-aligned vt-media</h5>
                  <p>I’m gon’ put her in a coma. You give a hundred reasons why, and you say you're really gonna try. So
                    I sat
                    quietly, agreed politely. Suiting up for my crowning battle. And on my 18th Birthday we got matching
                    tattoos. So
                    très chic, yeah, she's a classic. I am ready for the road less traveled.</p>
                  <p>I'm walking on air (tonight). But down to earth. You're original, cannot be replaced. But in
                    another life I would
                    be your girl. We drove to Cali and got drunk on the beach. We can dance, until we die, you and I,
                    will be young
                    forever. Saw you downtown singing the Blues.</p>
                </div>
              </div>

              <div class="vt-media" style="margin-bottom:10px">
                <img src="./css/img.png" class="align-self-center mr-3"
                  style="width:64px;height:64px;margin-right:10px;background-color: rgb(108, 117, 125)" alt="...">
                <div class="vt-media-body">
                  <h5 class="mt-0">Top-aligned vt-media</h5>
                  <p>I’m gon’ put her in a coma. You give a hundred reasons why, and you say you're really gonna try. So
                    I sat
                    quietly, agreed politely. Suiting up for my crowning battle. And on my 18th Birthday we got matching
                    tattoos. So
                    très chic, yeah, she's a classic. I am ready for the road less traveled.</p>
                  <p>I'm walking on air (tonight). But down to earth. You're original, cannot be replaced. But in
                    another life I would
                    be your girl. We drove to Cali and got drunk on the beach. We can dance, until we die, you and I,
                    will be young
                    forever. Saw you downtown singing the Blues.</p>
                </div>
              </div>

              <div class="vt-media" style="margin-bottom:10px">
                <img src="./css/img.png" class="align-self-end mr-3"
                  style="width:64px;height:64px;margin-right:10px;background-color: rgb(108, 117, 125)" alt="...">
                <div class="vt-media-body">
                  <h5 class="mt-0">Top-aligned vt-media</h5>
                  <p>I’m gon’ put her in a coma. You give a hundred reasons why, and you say you're really gonna try. So
                    I sat
                    quietly, agreed politely. Suiting up for my crowning battle. And on my 18th Birthday we got matching
                    tattoos. So
                    très chic, yeah, she's a classic. I am ready for the road less traveled.</p>
                  <p>I'm walking on air (tonight). But down to earth. You're original, cannot be replaced. But in
                    another life I would
                    be your girl. We drove to Cali and got drunk on the beach. We can dance, until we die, you and I,
                    will be young
                    forever. Saw you downtown singing the Blues.</p>
                </div>
              </div>

              <div class="vt-media" style="margin-bottom:10px">
                <div class="vt-media-body">
                  <h5 class="mt-0 mb-1">vt-media object</h5>
                  <p>I know there will be sacrifice but that's the price. Are you brave enough to let me see your
                    peacock? Be your
                    teenage dream tonight. Uh-huh, I see you. There’s no going back. Yeah, we maxed our credit cards and
                    got kicked
                    out of the bar. So let me get you in your birthday suit. You may fall in love when you meet her. Had
                    the world in
                    the palm of your hands. Don't let the greatness get you down, oh, oh yeah. Now we talking astrology,
                    getting our
                    nails did, all Japanese-y. Make me your Aphrodite.</p>
                </div>
                <img src="./css/img.png" class="ml-3"
                  style="width:64px;height:64px;margin-left:10px;background-color: rgb(108, 117, 125)" alt="...">
              </div>

              <ul class="list-unstyled">
                <li class="vt-media" style="margin-bottom:10px">
                  <img src="./css/img.png" class="mr-3"
                    style="width:64px;height:64px;margin-right:10px;background-color: rgb(108, 117, 125)" alt="...">
                  <div class="vt-media-body">
                    <h5 class="mt-0 mb-1">List-based vt-media object</h5>
                    <p>All my girls vintage Chanel baby. So you can have your cake. Tonight, tonight, tonight, I'm
                      walking on air.
                      Slowly swallowing down my fear, yeah yeah. Growing fast into a bolt of lightning. So hot and
                      heavy, 'Til dawn.
                      That fairy tale ending with a knight in shining armor. Heavy is the head that wears the crown.</p>
                  </div>
                </li>
                <li class="vt-media my-4" style="margin-bottom:10px">
                  <img src="./css/img.png" class="mr-3"
                    style="width:64px;height:64px;margin-right:10px;background-color: rgb(108, 117, 125)" alt="...">
                  <div class="vt-media-body">
                    <h5 class="mt-0 mb-1">List-based vt-media object</h5>
                    <p>Maybe a reason why all the doors are closed. Cause once you’re mine, once you’re mine. Be your
                      teenage dream
                      tonight. Heavy is the head that wears the crown. It's not even a holiday, nothing to celebrate. A
                      perfect storm,
                      perfect storm.</p>
                  </div>
                </li>
                <li class="vt-media" style="margin-bottom:10px">
                  <img src="./css/img.png" class="mr-3"
                    style="width:64px;height:64px;margin-right:10px;background-color: rgb(108, 117, 125)" alt="...">
                  <div class="vt-media-body">
                    <h5 class="mt-0 mb-1">List-based vt-media object</h5>
                    <p>Are you brave enough to let me see your peacock? There’s no going back. This is the last time you
                      say, after
                      the last line you break. At the eh-end of it all.</p>
                  </div>
                </li>
              </ul>

            </div>
            <div class="pre">
              <ol>
                <li>看demo源码
                </li>
              </ol>
            </div>
            <!--pre-->
          </div>
        </div>

        <div id="nav">
          <div class="page_tit">导航、导航条</div>
          <div class="table_row">
            <div class="page_tit3">.vt-nav | .vt-navbar</div>
            <div class="example">
              <nav class="vt-nav" style="margin-bottom:10px">
                <a class="vt-nav-link active" href="#">Active</a>
                <a class="vt-nav-link" href="#">Link</a>
                <a class="vt-nav-link" href="#">Link</a>
                <a class="vt-nav-link disabled">Disabled</a>
              </nav>

              <ul class="vt-nav justify-content-center" style="margin-bottom:10px">
                <li class="vt-nav-item">
                  <a class="vt-nav-link active" href="#">Active</a>
                </li>
                <li class="vt-nav-item">
                  <a class="vt-nav-link" href="#">Link</a>
                </li>
                <li class="vt-nav-item">
                  <a class="vt-nav-link" href="#">Link</a>
                </li>
                <li class="vt-nav-item">
                  <a class="vt-nav-link disabled">Disabled</a>
                </li>
              </ul>

              <ul class="vt-nav justify-content-end" style="margin-bottom:10px">
                <li class="vt-nav-item">
                  <a class="vt-nav-link active" href="#">Active</a>
                </li>
                <li class="vt-nav-item">
                  <a class="vt-nav-link" href="#">Link</a>
                </li>
                <li class="vt-nav-item">
                  <a class="vt-nav-link" href="#">Link</a>
                </li>
                <li class="vt-nav-item">
                  <a class="vt-nav-link disabled">Disabled</a>
                </li>
              </ul>

              <nav class="vt-nav flex-column" style="margin-bottom:10px">
                <a class="vt-nav-link active" href="#">Active</a>
                <a class="vt-nav-link" href="#">Link</a>
                <a class="vt-nav-link" href="#">Link</a>
                <a class="vt-nav-link disabled">Disabled</a>
              </nav>

              <ul class="vt-nav vt-nav-tabs" style="margin-bottom:10px">
                <li class="vt-nav-item">
                  <a class="vt-nav-link active" href="#">Active</a>
                </li>
                <li class="vt-nav-item">
                  <a class="vt-nav-link" href="#">Link</a>
                </li>
                <li class="vt-nav-item">
                  <a class="vt-nav-link" href="#">Link</a>
                </li>
                <li class="vt-nav-item">
                  <a class="vt-nav-link disabled">Disabled</a>
                </li>
              </ul>

              <ul class="vt-nav vt-nav-pills" style="margin-bottom:10px">
                <li class="vt-nav-item">
                  <a class="vt-nav-link active" href="#">Active</a>
                </li>
                <li class="vt-nav-item">
                  <a class="vt-nav-link" href="#">Link</a>
                </li>
                <li class="vt-nav-item">
                  <a class="vt-nav-link" href="#">Link</a>
                </li>
                <li class="vt-nav-item">
                  <a class="vt-nav-link disabled">Disabled</a>
                </li>
              </ul>

              <nav class="vt-nav vt-nav-pills vt-nav-fill" style="margin-bottom:10px">
                <a class="vt-nav-link active" href="#">Active</a>
                <a class="vt-nav-link" href="#">Much longer vt-nav link</a>
                <a class="vt-nav-link" href="#">Link</a>
                <a class="vt-nav-link disabled">Disabled</a>
              </nav>

              <nav class="vt-nav vt-nav-pills vt-nav-justified" style="margin-bottom:10px">
                <a class="vt-nav-link active" href="#">Active</a>
                <a class="vt-nav-link" href="#">Much longer vt-nav link</a>
                <a class="vt-nav-link" href="#">Link</a>
                <a class="vt-nav-link disabled">Disabled</a>
              </nav>

              <nav class="vt-nav vt-nav-pills flex-column flex-sm-row" style="margin-bottom:10px">
                <a class="flex-sm-fill text-sm-center vt-nav-link active" href="#">Active</a>
                <a class="flex-sm-fill text-sm-center vt-nav-link" href="#">Longer vt-nav link</a>
                <a class="flex-sm-fill text-sm-center vt-nav-link" href="#">Link</a>
                <a class="flex-sm-fill text-sm-center vt-nav-link disabled">Disabled</a>
              </nav>

              <!-- Image and text -->
              <nav class="vt-navbar vt-navbar-light back-light" style="margin-bottom:10px">
                <a class="vt-navbar-brand" href="#">
                  <img src="./css/img.png" width="30" height="30" class="d-inline-block align-top" alt="">
                  ui.css
                </a>
              </nav>

              <nav class="vt-navbar vt-navbar-expand-lg vt-navbar-light back-light" style="margin-bottom:10px">
                <a class="vt-navbar-brand" href="#">NavbarCollapse</a>
                <button class="vt-navbar-toggler" type="button">
                  <span class="vt-iconfont icon-menu"></span>
                </button>
                <div class="collapse vt-navbar-collapse" id="navbarNav">
                  <ul class="vt-navbar-nav">
                    <li class="vt-nav-item active">
                      <a class="vt-nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="vt-nav-item">
                      <a class="vt-nav-link" href="#">Features</a>
                    </li>
                    <li class="vt-nav-item">
                      <a class="vt-nav-link" href="#">Pricing</a>
                    </li>
                    <li class="vt-nav-item">
                      <a class="vt-nav-link disabled">Disabled</a>
                    </li>
                  </ul>
                </div>
              </nav>

              <nav class="vt-navbar vt-navbar-light back-light" style="margin-bottom:10px">
                <form class="form-inline">
                  <input class="vt-input mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                  <button class="vt-button vt-green my-2 my-sm-0" type="submit">Search</button>
                </form>
              </nav>

              <nav class="vt-navbar vt-navbar-light back-light">
                <a class="vt-navbar-brand">Navbar</a>
                <form class="form-inline">
                  <input class="vt-input mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                  <button class="vt-button vt-green my-2 my-sm-0" type="submit">Search</button>
                </form>
              </nav>

            </div>
            <div class="pre">
              <ol>
                <li>看demo源码
                </li>
              </ol>
            </div>
            <!--pre-->
          </div>
        </div>

        <div id="breadcrumb">
          <div class="page_tit">面包屑</div>
          <div class="table_row">
            <div class="page_tit3">.vt-breadcrumb</div>
            <div class="example">
              <nav aria-label="vt-breadcrumb">
                <ol class="vt-breadcrumb">
                  <li class="vt-breadcrumb-item active" aria-current="page">Home</li>
                </ol>
              </nav>

              <nav aria-label="vt-breadcrumb">
                <ol class="vt-breadcrumb">
                  <li class="vt-breadcrumb-item"><a href="#">Home</a></li>
                  <li class="vt-breadcrumb-item active" aria-current="page">Library</li>
                </ol>
              </nav>

              <nav aria-label="vt-breadcrumb">
                <ol class="vt-breadcrumb">
                  <li class="vt-breadcrumb-item"><a href="#">Home</a></li>
                  <li class="vt-breadcrumb-item"><a href="#">Library</a></li>
                  <li class="vt-breadcrumb-item active" aria-current="page">Data</li>
                </ol>
              </nav>
            </div>
            <div class="pre">
              <ol>
                <li>看demo源码
                </li>
              </ol>
            </div>
            <!--pre-->
          </div>
        </div>

        <div id="badge">
          <div class="page_tit">徽章</div>
          <div class="table_row">
            <div class="page_tit3">.vt-badge</div>
            <div class="example">
              <div style="margin-bottom:10px;">
                <h1>Example heading <span class="vt-badge vt-badge-secondary">New</span></h1>
                <h2>Example heading <span class="vt-badge vt-badge-secondary">New</span></h2>
                <h3>Example heading <span class="vt-badge vt-badge-secondary">New</span></h3>
                <h4>Example heading <span class="vt-badge vt-badge-secondary">New</span></h4>
                <h5>Example heading <span class="vt-badge vt-badge-secondary">New</span></h5>
                <h6>Example heading <span class="vt-badge vt-badge-secondary">New</span></h6>
              </div>

              <button type="button" class="vt-button vt-blue" style="margin-bottom:10px;">
                Notifications <span class="vt-badge vt-badge-light">4</span>
              </button>

              <button type="button" class="vt-button vt-blue" style="margin-bottom:10px;">
                Profile <span class="vt-badge vt-badge-light">9</span>
                <span class="sr-only">unread messages</span>
              </button>

              <div style="margin-bottom:10px;">
                <span class="vt-badge vt-badge-primary">Primary</span>
                <span class="vt-badge vt-badge-secondary">Secondary</span>
                <span class="vt-badge vt-badge-success">Success</span>
                <span class="vt-badge vt-badge-danger">Danger</span>
                <span class="vt-badge vt-badge-warning">Warning</span>
                <span class="vt-badge vt-badge-info">Info</span>
                <span class="vt-badge vt-badge-light">Light</span>
                <span class="vt-badge vt-badge-dark">Dark</span>
              </div>

              <div style="margin-bottom:10px;">
                <span class="vt-badge vt-badge-pill vt-badge-primary">Primary</span>
                <span class="vt-badge vt-badge-pill vt-badge-secondary">Secondary</span>
                <span class="vt-badge vt-badge-pill vt-badge-success">Success</span>
                <span class="vt-badge vt-badge-pill vt-badge-danger">Danger</span>
                <span class="vt-badge vt-badge-pill vt-badge-warning">Warning</span>
                <span class="vt-badge vt-badge-pill vt-badge-info">Info</span>
                <span class="vt-badge vt-badge-pill vt-badge-light">Light</span>
                <span class="vt-badge vt-badge-pill vt-badge-dark">Dark</span>
              </div>

              <div style="margin-bottom:10px;">
                <a href="#" class="vt-badge vt-badge-primary">Primary</a>
                <a href="#" class="vt-badge vt-badge-secondary">Secondary</a>
                <a href="#" class="vt-badge vt-badge-success">Success</a>
                <a href="#" class="vt-badge vt-badge-danger">Danger</a>
                <a href="#" class="vt-badge vt-badge-warning">Warning</a>
                <a href="#" class="vt-badge vt-badge-info">Info</a>
                <a href="#" class="vt-badge vt-badge-light">Light</a>
                <a href="#" class="vt-badge vt-badge-dark">Dark</a>
              </div>

            </div>
            <div class="pre">
              <ol>
                <li>看demo源码
                </li>
              </ol>
            </div>
            <!--pre-->
          </div>
        </div>

        <div id="placeholder">
          <div class="page_tit">占位符</div>
          <div class="table_row">
            <div class="page_tit3">.vt-placeholder</div>
            <div class="example">
              <div class="vt-card" aria-hidden="true" style="width:300px;">
                <div class="vt-card-img-top">
                  <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M64 896V128h896v768H64z m64-128l192-192 116.352 116.352L640 448l256 307.2V192H128v576z m224-480a96 96 0 1 1-0.064 192.064A96 96 0 0 1 352 288z" />
                  </svg>
                </div>
                <div class="vt-card-body">
                  <h5 class="vt-card-title vt-placeholder-glow">
                    <span class="vt-placeholder col-6"></span>
                  </h5>
                  <p class="vt-card-text vt-placeholder-glow">
                    <span class="vt-placeholder col-7"></span>
                    <span class="vt-placeholder col-4"></span>
                    <span class="vt-placeholder col-4"></span>
                    <span class="vt-placeholder col-6"></span>
                    <span class="vt-placeholder col-8"></span>
                  </p>
                  <a href="#" tabindex="-1" class="vt-button vt-blue vt-disabled vt-placeholder col-6"></a>
                </div>
              </div>
            </div>
            <div class="pre">
              <ol>
                <li>看demo源码
                </li>
              </ol>
            </div>
            <!--pre-->
          </div>
        </div>

        <div id="avatar">
          <div class="page_tit">头像</div>
          <div class="table_row">
            <div class="page_tit3">.vt-avatar</div>
            <div class="example">
              <span class="vt-avatar vt-avatar-large">
                <i class="vt-avatar-image"><img src="./css/img.png"></i>
                <span class="vt-badge vt-badge-primary">99+</span>
              </span>
              <span class="vt-avatar">
                <i class="vt-avatar-image"><img src="./css/img.png"></i>
                <span class="vt-badge vt-badge-primary">4</span>
              </span>
              <span class="vt-avatar vt-avatar-small">
                <i class="vt-avatar-image"><img src="./css/img.png"></i>
                <span class="vt-badge vt-badge-primary"></span>
              </span>
              <span class="vt-avatar vt-avatar-large vt-avatar-square">
                <i class="vt-avatar-image"><img src="./css/img.png"></i>
                <span class="vt-badge vt-badge-primary">4</span>
              </span>
              <span class="vt-avatar vt-avatar-square">
                <i class="vt-avatar-image"><img src="./css/img.png"></i>
                <span class="vt-badge vt-badge-primary">4</span>
              </span>
              <span class="vt-avatar vt-avatar-small vt-avatar-square">
                <i class="vt-avatar-image"><img src="./css/img.png"></i>
                <span class="vt-badge vt-badge-primary">4</span>
              </span>
            </div>
            <div class="pre">
              <ol>
                <li>看demo源码
                </li>
              </ol>
            </div>
            <!--pre-->
          </div>
        </div>

        <div id="spinners">
          <div class="page_tit">环状旋转器</div>
          <div class="table_row">
            <div class="page_tit3">.vt-spinner-border | .vt-spinner-grow</div>
            <div class="example">
              <div class="vt-spinner-border" role="status">
                <span class="sr-only">Loading...</span>
              </div>
              <div class="vt-spinner-border color-primary" role="status">
                <span class="sr-only">Loading...</span>
              </div>
              <div class="vt-spinner-border color-secondary" role="status">
                <span class="sr-only">Loading...</span>
              </div>
              <div class="vt-spinner-border color-success" role="status">
                <span class="sr-only">Loading...</span>
              </div>
              <div class="vt-spinner-border color-danger" role="status">
                <span class="sr-only">Loading...</span>
              </div>
              <div class="vt-spinner-border color-warning" role="status">
                <span class="sr-only">Loading...</span>
              </div>
              <div class="vt-spinner-border color-info" role="status">
                <span class="sr-only">Loading...</span>
              </div>
              <div class="vt-spinner-border color-light" role="status">
                <span class="sr-only">Loading...</span>
              </div>
              <div class="vt-spinner-border color-dark" role="status">
                <span class="sr-only">Loading...</span>
              </div>

              <div class="vt-spinner-grow" role="status">
                <span class="sr-only">Loading...</span>
              </div>
              <div class="vt-spinner-grow color-primary" role="status">
                <span class="sr-only">Loading...</span>
              </div>
              <div class="vt-spinner-grow color-secondary" role="status">
                <span class="sr-only">Loading...</span>
              </div>
              <div class="vt-spinner-grow color-success" role="status">
                <span class="sr-only">Loading...</span>
              </div>
              <div class="vt-spinner-grow color-danger" role="status">
                <span class="sr-only">Loading...</span>
              </div>
              <div class="vt-spinner-grow color-warning" role="status">
                <span class="sr-only">Loading...</span>
              </div>
              <div class="vt-spinner-grow color-info" role="status">
                <span class="sr-only">Loading...</span>
              </div>
              <div class="vt-spinner-grow color-light" role="status">
                <span class="sr-only">Loading...</span>
              </div>
              <div class="vt-spinner-grow color-dark" role="status">
                <span class="sr-only">Loading...</span>
              </div>

              <div class="vt-spinner-border vt-spinner-border-sm" role="status">
                <span class="sr-only">Loading...</span>
              </div>
              <div class="vt-spinner-grow vt-spinner-grow-sm" role="status">
                <span class="sr-only">Loading...</span>
              </div>

              <div class="vt-spinner-border" style="width: 3rem; height: 3rem;" role="status">
                <span class="sr-only">Loading...</span>
              </div>
              <div class="vt-spinner-grow" style="width: 3rem; height: 3rem;" role="status">
                <span class="sr-only">Loading...</span>
              </div>

              <button class="vt-button vt-blue vt-disabled" type="button">
                <span class="vt-spinner-border vt-spinner-border-sm" role="status" aria-hidden="true"></span>
                <span class="sr-only">Loading...</span>
              </button>
              <button class="vt-button vt-blue vt-disabled" type="button">
                <span class="vt-spinner-border vt-spinner-border-sm" role="status" aria-hidden="true"></span>
                Loading...
              </button>

              <button class="vt-button vt-blue vt-disabled" type="button" disabled>
                <span class="vt-spinner-grow vt-spinner-grow-sm" role="status" aria-hidden="true"></span>
                <span class="sr-only">Loading...</span>
              </button>
              <button class="vt-button vt-blue vt-disabled" type="button" disabled>
                <span class="vt-spinner-grow vt-spinner-grow-sm" role="status" aria-hidden="true"></span>
                Loading...
              </button>
            </div>
            <div class="pre">
              <ol>
                <li>看demo源码
                </li>
              </ol>
            </div>
            <!--pre-->
          </div>
        </div>

        <div id="divider">
          <div class="page_tit">分割线</div>
          <div class="table_row">
            <div class="page_tit3">.vt-divider</div>
            <div class="example">
              <div class="vt-divider vt-divider-horizontal vt-divider-default">

              </div>

              <div
                class="vt-divider vt-divider-horizontal vt-divider-default vt-divider-with-text vt-divider-with-text-center">
                <span class="vt-divider-inner-text">With Text</span>
              </div>

              <div class="vt-divider vt-divider-horizontal vt-divider-default vt-divider-dashed">

              </div>

              <div>
                Text
                <div class="vt-divider vt-divider-vertical vt-divider-default">

                </div>
                <a href="#">Link</a>
                <div class="vt-divider vt-divider-vertical vt-divider-default">

                </div>
                <a href="#">Link</a>
              </div>

              <div class="vt-divider vt-divider-horizontal vt-divider-default vt-divider-with-text-left"><span
                  class="vt-divider-inner-text">Left Text</span>
              </div>

              <div class="vt-divider vt-divider-horizontal vt-divider-default vt-divider-with-text-right"><span
                  class="vt-divider-inner-text">Right Text</span>
              </div>
            </div>
            <div class="pre">
              <ol>
                <li>&lt;div class=&quot;vt-divider&quot;&gt;&lt;span
                  class=&quot;vt-divider-inner-text&quot;&gt;Left Text&lt;/span&gt;&lt;/div&gt;
                </li>
                <li>
                  &lt;div&gt;
                  Text
                  &lt;div class=&quot;vt-divider vt-divider-vertical vt-divider-default&quot;&gt;

                  &lt;/div&gt;
                  &lt;a href=&quot;#&quot;&gt;Link&lt;/a&gt;
                  &lt;div class=&quot;vt-divider vt-divider-vertical vt-divider-default&quot;&gt;

                  &lt;/div&gt;
                  &lt;a href=&quot;#&quot;&gt;Link&lt;/a&gt;
                  &lt;/div&gt;
                </li>
                <li>&lt;div class=&quot;vt-divider vt-divider-horizontal vt-divider-default
                  vt-divider-with-text-left&quot;&gt;&lt;span
                  class=&quot;vt-divider-inner-text&quot;&gt;Left Text&lt;/span&gt;&lt;/div&gt;
                </li>
                <li>&lt;div class=&quot;vt-divider vt-divider-horizontal vt-divider-default
                  vt-divider-with-text-right&quot;&gt;&lt;span
                  class=&quot;vt-divider-inner-text&quot;&gt;Right Text&lt;/span&gt;&lt;/div&gt;
                </li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
        </div>

        <div id="passwordinput">
          <div class="page_tit">密码输入框</div>
          <div class="table_row">
            <div class="page_tit3">.vt-password-input</div>
            <div class="example">
              <div class="back-gray" style="padding:10px;">
                <div class="vt-password-input">
                  <ul class="vt-password-input__security vt-hairline--surround">
                    <li class="vt-password-input__item"><i style="visibility: visible;"></i>

                    </li>
                    <li class="vt-hairline--left vt-password-input__item vt-password-input__item--focus">
                      <i style="visibility: hidden;"></i>
                      <div class="vt-password-input__cursor"></div>
                    </li>
                    <li class="vt-hairline--left vt-password-input__item"><i style="visibility: hidden;"></i>

                    </li>
                    <li class="vt-hairline--left vt-password-input__item"><i style="visibility: hidden;"></i>

                    </li>
                    <li class="vt-hairline--left vt-password-input__item"><i style="visibility: hidden;"></i>

                    </li>
                    <li class="vt-hairline--left vt-password-input__item"><i style="visibility: hidden;"></i>

                    </li>
                  </ul>

                </div>

                <div class="vt-password-input">
                  <ul class="vt-password-input__security vt-hairline--surround">
                    <li class="vt-password-input__item"><i style="visibility: visible;"></i>

                    </li>
                    <li class="vt-hairline--left vt-password-input__item"><i style="visibility: visible;"></i>

                    </li>
                    <li class="vt-hairline--left vt-password-input__item"><i style="visibility: visible;"></i>

                    </li>
                    <li class="vt-hairline--left vt-password-input__item"><i style="visibility: hidden;"></i>

                    </li>
                  </ul>

                </div>

                <div class="vt-password-input">
                  <ul class="vt-password-input__security">
                    <li class="vt-password-input__item"><i style="visibility: visible;"></i>

                    </li>
                    <li class="vt-password-input__item" style="margin-left: 10px;"><i style="visibility: visible;"></i>

                    </li>
                    <li class="vt-password-input__item" style="margin-left: 10px;"><i style="visibility: visible;"></i>

                    </li>
                    <li class="vt-password-input__item" style="margin-left: 10px;"><i style="visibility: hidden;"></i>

                    </li>
                    <li class="vt-password-input__item" style="margin-left: 10px;"><i style="visibility: hidden;"></i>

                    </li>
                    <li class="vt-password-input__item" style="margin-left: 10px;"><i style="visibility: hidden;"></i>

                    </li>
                  </ul>

                </div>
              </div>
            </div>
            <div class="pre">
              <ol>
                <li>看demo源码</li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
        </div>

        <div id="image">
          <div class="page_tit">图片</div>
          <div class="table_row">
            <div class="page_tit3">.vt-image</div>
            <div class="example">
              <div class="vt-image" style="width: 100px; height: 100px;"><img
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpad.mydrivers.com%2Fimg%2F20201113%2Ff70c0a3b0ec34d94bd40f7aeb26587fd.png&refer=http%3A%2F%2Fpad.mydrivers.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667964408&t=503033dacce870ae351b7c1524f92deb"
                  class="vt-image__img">


              </div>

              <div class="vt-image" style="width: 100px; height: 100px;"><img
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpad.mydrivers.com%2Fimg%2F20201113%2Ff70c0a3b0ec34d94bd40f7aeb26587fd.png&refer=http%3A%2F%2Fpad.mydrivers.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667964408&t=503033dacce870ae351b7c1524f92deb"
                  class="vt-image__img" style="object-fit: contain;">


              </div>

              <div class="vt-image" style="width: 100px; height: 100px;"><img
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpad.mydrivers.com%2Fimg%2F20201113%2Ff70c0a3b0ec34d94bd40f7aeb26587fd.png&refer=http%3A%2F%2Fpad.mydrivers.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667964408&t=503033dacce870ae351b7c1524f92deb"
                  class="vt-image__img" style="object-fit: cover;">


              </div>

              <div class="vt-image" style="width: 100px; height: 100px;"><img
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpad.mydrivers.com%2Fimg%2F20201113%2Ff70c0a3b0ec34d94bd40f7aeb26587fd.png&refer=http%3A%2F%2Fpad.mydrivers.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667964408&t=503033dacce870ae351b7c1524f92deb"
                  class="vt-image__img" style="object-fit: fill;">


              </div>

              <div class="vt-image" style="width: 100px; height: 100px;"><img
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpad.mydrivers.com%2Fimg%2F20201113%2Ff70c0a3b0ec34d94bd40f7aeb26587fd.png&refer=http%3A%2F%2Fpad.mydrivers.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667964408&t=503033dacce870ae351b7c1524f92deb"
                  class="vt-image__img" style="object-fit: none;">


              </div>

              <div class="vt-image" style="width: 100px; height: 100px;"><img
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpad.mydrivers.com%2Fimg%2F20201113%2Ff70c0a3b0ec34d94bd40f7aeb26587fd.png&refer=http%3A%2F%2Fpad.mydrivers.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667964408&t=503033dacce870ae351b7c1524f92deb"
                  class="vt-image__img" style="object-fit: scale-down;">


              </div>

              <div class="vt-image" style="width: 100px; height: 100px;"><img
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpad.mydrivers.com%2Fimg%2F20201113%2Ff70c0a3b0ec34d94bd40f7aeb26587fd.png&refer=http%3A%2F%2Fpad.mydrivers.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667964408&t=503033dacce870ae351b7c1524f92deb"
                  class="vt-image__img" style="object-fit: cover; object-position: left center;">


              </div>

              <div class="vt-image" style="width: 100px; height: 100px;"><img
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpad.mydrivers.com%2Fimg%2F20201113%2Ff70c0a3b0ec34d94bd40f7aeb26587fd.png&refer=http%3A%2F%2Fpad.mydrivers.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667964408&t=503033dacce870ae351b7c1524f92deb"
                  class="vt-image__img" style="object-fit: cover; object-position: center center;">


              </div>

              <div class="vt-image" style="width: 100px; height: 100px;"><img
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpad.mydrivers.com%2Fimg%2F20201113%2Ff70c0a3b0ec34d94bd40f7aeb26587fd.png&refer=http%3A%2F%2Fpad.mydrivers.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667964408&t=503033dacce870ae351b7c1524f92deb"
                  class="vt-image__img" style="object-fit: cover; object-position: right center;">


              </div>

              <div class="vt-image" style="width: 100px; height: 100px;"><img
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpad.mydrivers.com%2Fimg%2F20201113%2Ff70c0a3b0ec34d94bd40f7aeb26587fd.png&refer=http%3A%2F%2Fpad.mydrivers.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667964408&t=503033dacce870ae351b7c1524f92deb"
                  class="vt-image__img" style="object-fit: contain; object-position: center top;">


              </div>

              <div class="vt-image" style="width: 100px; height: 100px;"><img
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpad.mydrivers.com%2Fimg%2F20201113%2Ff70c0a3b0ec34d94bd40f7aeb26587fd.png&refer=http%3A%2F%2Fpad.mydrivers.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667964408&t=503033dacce870ae351b7c1524f92deb"
                  class="vt-image__img" style="object-fit: contain; object-position: center center;">


              </div>

              <div class="vt-image" style="width: 100px; height: 100px;"><img
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpad.mydrivers.com%2Fimg%2F20201113%2Ff70c0a3b0ec34d94bd40f7aeb26587fd.png&refer=http%3A%2F%2Fpad.mydrivers.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667964408&t=503033dacce870ae351b7c1524f92deb"
                  class="vt-image__img" style="object-fit: contain; object-position: center bottom;">


              </div>

              <div class="vt-image vt-image--round" style="width: 100px; height: 100px;"><img
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpad.mydrivers.com%2Fimg%2F20201113%2Ff70c0a3b0ec34d94bd40f7aeb26587fd.png&refer=http%3A%2F%2Fpad.mydrivers.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667964408&t=503033dacce870ae351b7c1524f92deb"
                  class="vt-image__img" style="object-fit: contain;">


              </div>

              <div class="vt-image vt-image--round" style="width: 100px; height: 100px;"><img
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpad.mydrivers.com%2Fimg%2F20201113%2Ff70c0a3b0ec34d94bd40f7aeb26587fd.png&refer=http%3A%2F%2Fpad.mydrivers.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667964408&t=503033dacce870ae351b7c1524f92deb"
                  class="vt-image__img" style="object-fit: cover;">


              </div>

              <div class="vt-image vt-image--round" style="width: 100px; height: 100px;"><img
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpad.mydrivers.com%2Fimg%2F20201113%2Ff70c0a3b0ec34d94bd40f7aeb26587fd.png&refer=http%3A%2F%2Fpad.mydrivers.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667964408&t=503033dacce870ae351b7c1524f92deb"
                  class="vt-image__img" style="object-fit: fill;">


              </div>

              <div class="vt-image vt-image--round" style="width: 100px; height: 100px;"><img
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpad.mydrivers.com%2Fimg%2F20201113%2Ff70c0a3b0ec34d94bd40f7aeb26587fd.png&refer=http%3A%2F%2Fpad.mydrivers.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667964408&t=503033dacce870ae351b7c1524f92deb"
                  class="vt-image__img" style="object-fit: cover;">


              </div>

              <div class="vt-image vt-image--round" style="width: 100px; height: 100px;"><img
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpad.mydrivers.com%2Fimg%2F20201113%2Ff70c0a3b0ec34d94bd40f7aeb26587fd.png&refer=http%3A%2F%2Fpad.mydrivers.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667964408&t=503033dacce870ae351b7c1524f92deb"
                  class="vt-image__img" style="object-fit: none;">


              </div>

              <div class="vt-image vt-image--round" style="width: 100px; height: 100px;"><img
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpad.mydrivers.com%2Fimg%2F20201113%2Ff70c0a3b0ec34d94bd40f7aeb26587fd.png&refer=http%3A%2F%2Fpad.mydrivers.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667964408&t=503033dacce870ae351b7c1524f92deb"
                  class="vt-image__img" style="object-fit: scale-down;">


              </div>

            </div>
            <div class="pre">
              <ol>
                <li>看demo源码</li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
        </div>

        <div id="alert">
          <div class="page_tit">警告 Alert</div>
          <div class="table_row">
            <div class="page_tit3">.vt-alert | .vt-lit</div>
            <div class="example">
              <div class="vt-alert vt-alert-primary" role="vt-alert">
                A simple primary vt-alert—check it out!
              </div>
              <div class="vt-alert vt-alert-secondary" role="vt-alert">
                A simple secondary vt-alert—check it out!
              </div>
              <div class="vt-alert vt-alert-success" role="vt-alert">
                A simple success vt-alert—check it out!
              </div>
              <div class="vt-alert vt-alert-danger" role="vt-alert">
                A simple danger vt-alert—check it out!
              </div>
              <div class="vt-alert vt-alert-warning" role="vt-alert">
                A simple warning vt-alert—check it out!
              </div>
              <div class="vt-alert vt-alert-info" role="vt-alert">
                A simple info vt-alert—check it out!
              </div>
              <div class="vt-alert vt-alert-light" role="vt-alert">
                A simple light vt-alert—check it out!
              </div>
              <div class="vt-alert vt-alert-dark" role="vt-alert">
                A simple dark vt-alert—check it out!
              </div>

              <div class="vt-alert vt-alert-primary" role="vt-alert">
                A simple primary vt-alert with <a href="#" class="vt-alert-link">an example link</a>. Give it a click
                if you like.
              </div>
              <div class="vt-alert vt-alert-secondary" role="vt-alert">
                A simple secondary vt-alert with <a href="#" class="vt-alert-link">an example link</a>. Give it a
                click if you like.
              </div>
              <div class="vt-alert vt-alert-success" role="vt-alert">
                A simple success vt-alert with <a href="#" class="vt-alert-link">an example link</a>. Give it a click
                if you like.
              </div>
              <div class="vt-alert vt-alert-danger" role="vt-alert">
                A simple danger vt-alert with <a href="#" class="vt-alert-link">an example link</a>. Give it a click
                if you like.
              </div>
              <div class="vt-alert vt-alert-warning" role="vt-alert">
                A simple warning vt-alert with <a href="#" class="vt-alert-link">an example link</a>. Give it a click
                if you like.
              </div>
              <div class="vt-alert vt-alert-info" role="vt-alert">
                A simple info vt-alert with <a href="#" class="vt-alert-link">an example link</a>. Give it a click if
                you like.
              </div>
              <div class="vt-alert vt-alert-light" role="vt-alert">
                A simple light vt-alert with <a href="#" class="vt-alert-link">an example link</a>. Give it a click if
                you like.
              </div>
              <div class="vt-alert vt-alert-dark" role="vt-alert">
                A simple dark vt-alert with <a href="#" class="vt-alert-link">an example link</a>. Give it a click if
                you like.
              </div>

              <div class="vt-alert vt-alert-success" role="vt-alert">
                <h4 class="vt-alert-heading">Well done!</h4>
                <p>Aww yeah, you successfully read this important vt-alert message. This example text is going to run a
                  bit longer so
                  that you can see how spacing within an vt-alert works with this kind of content.</p>
                <hr>
                <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
              </div>

              <div class="vt-alert vt-alert-warning vt-alert-dismissible" role="alert">
                <strong>Holy guacamole!</strong> You should check in on some of those fields below.
                <button type="button" class="vt-button vt-button--text vt-lit vt-iconfont icon-close close">
                </button>
              </div>

              <div class="vt-phone">
                <div class="vt-phone-content">
                  <div class="vt-alert vt-alert-warning vt-lit position-absolute"
                    style="top:15px;left:15px;right:15px;z-index:1" role="vt-alert">
                    A simple warning vt-alert—check it out!
                  </div>
                  <div class="position-absolute"
                    style="top:0;left:0;right:0;bottom:0;display: flex;justify-content: center;align-items: center;background-color: rgba(0,0,0,.5);z-index:2;">
                    <div class="vt-alert vt-alert-danger  vt-lit" role="vt-alert" style="width:160px;">
                      A simple warning vt-alert—check it out!
                    </div>
                  </div>
                  <div class="vt-alert vt-alert-success position-absolute vt-lit"
                    style="bottom:15px;left:15px;right:15px;z-index:1" role="vt-alert">
                    A simple warning vt-alert—check it out!
                  </div>
                </div>
              </div>

            </div>
            <div class="pre">
              <ol>
                <li>看demo源码</li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
        </div>

        <div id="modal">
          <div class="page_tit">模态框 Modal</div>
          <div class="table_row">
            <div class="page_tit3">.vt-modal</div>
            <div class="example">
              <div class="vt-modal">
                <div class="vt-modal-dialog">
                  <div class="vt-modal-content">
                    <div class="vt-modal-header">
                      <h5 class="vt-modal-title">vt-modal title</h5>
                      <button type="button" class="vt-button vt-button--text vt-lit vt-iconfont icon-close">
                      </button>
                    </div>
                    <div class="vt-modal-body">
                      <p>vt-modal body text goes here.</p>
                    </div>
                    <div class="vt-modal-footer">
                      <button type="button" class="vt-button vt-round" data-dismiss="vt-modal">Close</button>
                      <button type="button" class="vt-button vt-round vt-blue">Save changes</button>
                    </div>
                  </div>
                </div>
              </div>

              <div class="vt-modal fade show">
                <div class="vt-modal-dialog">
                  <div class="vt-modal-content">
                    <div class="vt-modal-header">
                      <h5 class="vt-modal-title" id="examplevt-modalLabel">New message</h5>
                      <button type="button" class="vt-button vt-button--text vt-lit vt-iconfont icon-close">
                      </button>
                    </div>
                    <div class="vt-modal-body">
                      <form>
                        <div class="form-group">
                          <label for="recipient-name" class="col-form-label">Recipient:</label>
                          <input type="text" class="vt-input" id="recipient-name">
                        </div>
                        <div class="form-group">
                          <label for="message-text" class="col-form-label">Message:</label>
                          <textarea class="vt-text" id="message-text"></textarea>
                        </div>
                      </form>
                    </div>
                    <div class="vt-modal-footer">
                      <button type="button" class="vt-button vt-round" data-dismiss="vt-modal">Close</button>
                      <button type="button" class="vt-button vt-round vt-blue">Send message</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="pre">
              <ol>
                <li>看demo源码</li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
        </div>

        <div id="pagination">
          <div class="page_tit">分页 Pagination</div>
          <div class="table_row">
            <div class="page_tit3">.vt-pagination</div>
            <div class="example">
              <ul class="vt-pagination">
                <li class="page-item"><a class="page-link" href="#">Previous</a></li>
                <li class="page-item"><a class="page-link" href="#">1</a></li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item"><a class="page-link" href="#">Next</a></li>
              </ul>

              <ul class="vt-pagination">
                <li class="page-item">
                  <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                  </a>
                </li>
                <li class="page-item"><a class="page-link" href="#">1</a></li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item">
                  <a class="page-link" href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                  </a>
                </li>
              </ul>

              <ul class="vt-pagination">
                <li class="page-item">
                  <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                  </a>
                </li>
                <li class="page-item"><a class="page-link" href="#">1</a></li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><span class="page-span">...</span></li>
                <li class="page-item">
                  <a class="page-link" href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                  </a>
                </li>
              </ul>

              <ul class="vt-pagination">
                <li class="page-item">
                  <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                  </a>
                </li>
                <li class="page-item"><span class="page-span">1/12</span></li>
                <li class="page-item">
                  <a class="page-link" href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                  </a>
                </li>
              </ul>

              <ul class="vt-pagination">
                <li class="page-item more-button">
                  <a class="page-link" href="#">加载更多</a>
                </li>
                <li class="page-item more">
                  <a class="page-link" href="#">加载更多</a>
                </li>
                <li class="page-item loading">
                  <span class="page-total">加载中, 请稍候...</span>
                </li>
                <li class="page-item loaded">
                  <span class="page-total">已经到底</span>
                </li>
                <li class="page-item"><span class="page-total">1/12</span></li>
              </ul>

              <ul class="vt-pagination">
                <li class="page-item disabled">
                  <a class="page-link">Previous</a>
                </li>
                <li class="page-item"><a class="page-link" href="#">1</a></li>
                <li class="page-item active" aria-current="page">
                  <a class="page-link" href="#">2</a>
                </li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item">
                  <a class="page-link" href="#">Next</a>
                </li>
              </ul>

              <ul class="vt-pagination vt-pagination-lg">
                <li class="page-item active" aria-current="page">
                  <span class="page-link">1</span>
                </li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
              </ul>

              <ul class="vt-pagination vt-pagination-sm">
                <li class="page-item active" aria-current="page">
                  <span class="page-link">1</span>
                </li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
              </ul>

              <ul class="vt-pagination justify-content-center">
                <li class="page-item disabled">
                  <a class="page-link">Previous</a>
                </li>
                <li class="page-item"><a class="page-link" href="#">1</a></li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item">
                  <a class="page-link" href="#">Next</a>
                </li>
              </ul>

              <ul class="vt-pagination justify-content-end">
                <li class="page-item disabled">
                  <a class="page-link">Previous</a>
                </li>
                <li class="page-item"><a class="page-link" href="#">1</a></li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item">
                  <a class="page-link" href="#">Next</a>
                </li>
              </ul>
            </div>
            <div class="pre">
              <ol>
                <li>&lt;ul class=&quot;vt-pagination&quot;&gt;
                  &lt;li class=&quot;page-item&quot;&gt;&lt;a class=&quot;page-link&quot;
                  href=&quot;#&quot;&gt;Previous&lt;/a&gt;&lt;/li&gt;
                  &lt;li class=&quot;page-item&quot;&gt;&lt;a class=&quot;page-link&quot;
                  href=&quot;#&quot;&gt;1&lt;/a&gt;&lt;/li&gt;
                  &lt;li class=&quot;page-item&quot;&gt;&lt;a class=&quot;page-link&quot;
                  href=&quot;#&quot;&gt;Next&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;</li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
        </div>

        <div id="progress">
          <div class="page_tit">进度条 Progress</div>
          <div class="table_row">
            <div class="page_tit3">.vt-progress</div>
            <div class="example">
              <div class="vt-progress">
                <div class="vt-progress-bar" role="vt-progressbar" aria-valuenow="0" aria-valuemin="0"
                  aria-valuemax="100"></div>
              </div>
              <div class="vt-progress">
                <div class="vt-progress-bar" role="vt-progressbar" style="width: 25%" aria-valuenow="25"
                  aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <div class="vt-progress">
                <div class="vt-progress-bar" role="vt-progressbar" style="width: 50%" aria-valuenow="50"
                  aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <div class="vt-progress">
                <div class="vt-progress-bar" role="vt-progressbar" style="width: 75%" aria-valuenow="75"
                  aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <div class="vt-progress">
                <div class="vt-progress-bar" role="vt-progressbar" style="width: 100%" aria-valuenow="100"
                  aria-valuemin="0" aria-valuemax="100"></div>
              </div>

              <div class="vt-progress">
                <div class="vt-progress-bar" role="vt-progressbar" style="width: 25%;" aria-valuenow="25"
                  aria-valuemin="0" aria-valuemax="100">25%</div>
              </div>

              <div class="vt-progress" style="height: 1px;">
                <div class="vt-progress-bar" role="vt-progressbar" style="width: 25%;" aria-valuenow="25"
                  aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <div class="vt-progress" style="height: 40px;">
                <div class="vt-progress-bar" role="vt-progressbar" style="width: 25%;" aria-valuenow="25"
                  aria-valuemin="0" aria-valuemax="100"></div>
              </div>

              <div class="vt-progress">
                <div class="vt-progress-bar back-success" role="vt-progressbar" style="width: 25%" aria-valuenow="25"
                  aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <div class="vt-progress">
                <div class="vt-progress-bar back-info" role="vt-progressbar" style="width: 50%" aria-valuenow="50"
                  aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <div class="vt-progress">
                <div class="vt-progress-bar back-warning" role="vt-progressbar" style="width: 75%" aria-valuenow="75"
                  aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <div class="vt-progress">
                <div class="vt-progress-bar back-danger" role="vt-progressbar" style="width: 100%" aria-valuenow="100"
                  aria-valuemin="0" aria-valuemax="100"></div>
              </div>

              <div class="vt-progress">
                <div class="vt-progress-bar" role="vt-progressbar" style="width: 15%" aria-valuenow="15"
                  aria-valuemin="0" aria-valuemax="100"></div>
                <div class="vt-progress-bar bg-success" role="vt-progressbar" style="width: 30%" aria-valuenow="30"
                  aria-valuemin="0" aria-valuemax="100"></div>
                <div class="vt-progress-bar bg-info" role="vt-progressbar" style="width: 20%" aria-valuenow="20"
                  aria-valuemin="0" aria-valuemax="100"></div>
              </div>

              <div class="vt-progress">
                <div class="vt-progress-bar vt-progress-bar-striped" role="vt-progressbar" style="width: 10%"
                  aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <div class="vt-progress">
                <div class="vt-progress-bar vt-progress-bar-striped back-success" role="vt-progressbar"
                  style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <div class="vt-progress">
                <div class="vt-progress-bar vt-progress-bar-striped back-info" role="vt-progressbar" style="width: 50%"
                  aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <div class="vt-progress">
                <div class="vt-progress-bar vt-progress-bar-striped back-warning" role="vt-progressbar"
                  style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <div class="vt-progress">
                <div class="vt-progress-bar vt-progress-bar-striped back-danger" role="vt-progressbar"
                  style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
              </div>

              <div class="vt-progress">
                <div class="vt-progress-bar vt-progress-bar-striped vt-progress-bar-animated" role="vt-progressbar"
                  aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
              </div>
            </div>
            <div class="pre">
              <ol>
                <li>看demo源码</li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
        </div>

        <div id="steps">
          <div class="page_tit">步骤条 Steps</div>
          <div class="table_row">
            <div class="page_tit3">.vt-steps</div>
            <div class="example">
              <div class="vt-steps vt-steps-horizontal">
                <div class="vt-steps-item vt-steps-status-finish" style="width: 25%;">
                  <div class="vt-steps-tail"><i></i></div>
                  <div class="vt-steps-head">
                    <div class="vt-steps-head-inner"><span class="vt-steps-icon vt-iconfont icon-success"></span>
                    </div>
                  </div>
                  <div class="vt-steps-main">
                    <div class="vt-steps-title">已完成</div>
                    <div class="vt-steps-content">这里是该步骤的描述信息</div>
                  </div>
                </div>
                <div class="vt-steps-item vt-steps-status-process" style="width: 25%;">
                  <div class="vt-steps-tail"><i></i></div>
                  <div class="vt-steps-head">
                    <div class="vt-steps-head-inner"><span>2</span></div>
                  </div>
                  <div class="vt-steps-main">
                    <div class="vt-steps-title">进行中</div>
                    <div class="vt-steps-content">这里是该步骤的描述信息</div>
                  </div>
                </div>
                <div class="vt-steps-item vt-steps-status-wait" style="width: 25%;">
                  <div class="vt-steps-tail"><i></i></div>
                  <div class="vt-steps-head">
                    <div class="vt-steps-head-inner"><span>3</span></div>
                  </div>
                  <div class="vt-steps-main">
                    <div class="vt-steps-title">待进行</div>
                    <div class="vt-steps-content">这里是该步骤的描述信息</div>
                  </div>
                </div>
                <div class="vt-steps-item vt-steps-status-wait" style="width: 25%;">
                  <div class="vt-steps-tail"><i></i></div>
                  <div class="vt-steps-head">
                    <div class="vt-steps-head-inner"><span>4</span></div>
                  </div>
                  <div class="vt-steps-main">
                    <div class="vt-steps-title">待进行</div>
                    <div class="vt-steps-content">这里是该步骤的描述信息</div>
                  </div>
                </div>
              </div>

              <div class="vt-steps vt-steps-horizontal vt-steps-small">
                <div class="vt-steps-item vt-steps-status-finish" style="width: 25%;">
                  <div class="vt-steps-tail"><i></i></div>
                  <div class="vt-steps-head">
                    <div class="vt-steps-head-inner"><span class="vt-steps-icon vt-iconfont icon-success"></span>
                    </div>
                  </div>
                  <div class="vt-steps-main">
                    <div class="vt-steps-title">已完成</div>

                  </div>
                </div>
                <div class="vt-steps-item vt-steps-status-finish" style="width: 25%;">
                  <div class="vt-steps-tail"><i></i></div>
                  <div class="vt-steps-head">
                    <div class="vt-steps-head-inner"><span class="vt-steps-icon vt-iconfont icon-success"></span>
                    </div>
                  </div>
                  <div class="vt-steps-main">
                    <div class="vt-steps-title">已完成</div>

                  </div>
                </div>
                <div class="vt-steps-item vt-steps-status-process" style="width: 25%;">
                  <div class="vt-steps-tail"><i></i></div>
                  <div class="vt-steps-head">
                    <div class="vt-steps-head-inner"><span>3</span></div>
                  </div>
                  <div class="vt-steps-main">
                    <div class="vt-steps-title">进行中</div>

                  </div>
                </div>
                <div class="vt-steps-item vt-steps-status-wait" style="width: 25%;">
                  <div class="vt-steps-tail"><i></i></div>
                  <div class="vt-steps-head">
                    <div class="vt-steps-head-inner"><span>4</span></div>
                  </div>
                  <div class="vt-steps-main">
                    <div class="vt-steps-title">待进行</div>

                  </div>
                </div>
              </div>

              <div class="vt-steps vt-steps-vertical">
                <div class="vt-steps-item vt-steps-status-finish" style="width: 100%;">
                  <div class="vt-steps-tail"><i></i></div>
                  <div class="vt-steps-head">
                    <div class="vt-steps-head-inner"><span class="vt-steps-icon vt-iconfont icon-success"></span>
                    </div>
                  </div>
                  <div class="vt-steps-main">
                    <div class="vt-steps-title">已完成</div>
                    <div class="vt-steps-content">这里是该步骤的描述信息</div>
                  </div>
                </div>
                <div class="vt-steps-item vt-steps-status-finish" style="width: 100%;">
                  <div class="vt-steps-tail"><i></i></div>
                  <div class="vt-steps-head">
                    <div class="vt-steps-head-inner"><span class="vt-steps-icon vt-iconfont icon-success"></span>
                    </div>
                  </div>
                  <div class="vt-steps-main">
                    <div class="vt-steps-title">已完成</div>
                    <div class="vt-steps-content">这里是该步骤的描述信息</div>
                  </div>
                </div>
                <div class="vt-steps-item vt-steps-status-process" style="width: 100%;">
                  <div class="vt-steps-tail"><i></i></div>
                  <div class="vt-steps-head">
                    <div class="vt-steps-head-inner"><span>3</span></div>
                  </div>
                  <div class="vt-steps-main">
                    <div class="vt-steps-title">进行中</div>
                    <div class="vt-steps-content">这里是该步骤的描述信息</div>
                  </div>
                </div>
                <div class="vt-steps-item vt-steps-status-wait" style="width: 100%;">
                  <div class="vt-steps-tail"><i></i></div>
                  <div class="vt-steps-head">
                    <div class="vt-steps-head-inner"><span>4</span></div>
                  </div>
                  <div class="vt-steps-main">
                    <div class="vt-steps-title">待进行</div>
                    <div class="vt-steps-content">这里是该步骤的描述信息</div>
                  </div>
                </div>
              </div>

              <div class="vt-steps vt-steps-horizontal">
                <div class="vt-steps-item vt-steps-status-finish" style="width: 25%;">
                  <div class="vt-steps-tail"><i></i></div>
                  <div class="vt-steps-head">
                    <div class="vt-steps-head-inner"><span class="vt-steps-icon vt-iconfont icon-success"></span>
                    </div>
                  </div>
                  <div class="vt-steps-main">
                    <div class="vt-steps-title">已完成</div>
                    <div class="vt-steps-content">这里是该步骤的描述信息</div>
                  </div>
                </div>
                <div class="vt-steps-item vt-steps-status-error" style="width: 25%;">
                  <div class="vt-steps-tail"><i></i></div>
                  <div class="vt-steps-head">
                    <div class="vt-steps-head-inner"><span class="vt-steps-icon vt-iconfont icon-stop"></span>
                    </div>
                  </div>
                  <div class="vt-steps-main">
                    <div class="vt-steps-title">进行中</div>
                    <div class="vt-steps-content">这里是该步骤的描述信息</div>
                  </div>
                </div>
                <div class="vt-steps-item vt-steps-status-wait" style="width: 25%;">
                  <div class="vt-steps-tail"><i></i></div>
                  <div class="vt-steps-head">
                    <div class="vt-steps-head-inner"><span>3</span></div>
                  </div>
                  <div class="vt-steps-main">
                    <div class="vt-steps-title">待进行</div>
                    <div class="vt-steps-content">这里是该步骤的描述信息</div>
                  </div>
                </div>
                <div class="vt-steps-item vt-steps-status-wait" style="width: 25%;">
                  <div class="vt-steps-tail"><i></i></div>
                  <div class="vt-steps-head">
                    <div class="vt-steps-head-inner"><span>4</span></div>
                  </div>
                  <div class="vt-steps-main">
                    <div class="vt-steps-title">待进行</div>
                    <div class="vt-steps-content">这里是该步骤的描述信息</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="pre">
              <ol>
                <li>看demo源码</li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
        </div>

        <div id="timeline">
          <div class="page_tit">时间线 Timeline</div>
          <div class="table_row">
            <div class="page_tit3">.vt-timeline | .vt-timeline-item</div>
            <div class="example">
              <div class="row">
                <div class="col-xl-6">
                  <ul class="vt-timeline">
                    <li class="vt-timeline-item">
                      <div class="vt-timeline-item-tail"></div>
                      <div class="vt-timeline-item-head vt-timeline-item-head-blue"></div>
                      <div class="vt-timeline-item-content">
                        <p class="time">1976年</p>
                        <p class="content">Apple I 问世</p>
                      </div>
                    </li>
                    <li class="vt-timeline-item">
                      <div class="vt-timeline-item-tail"></div>
                      <div class="vt-timeline-item-head vt-timeline-item-head-blue"></div>
                      <div class="vt-timeline-item-content">
                        <p class="time">1984年</p>
                        <p class="content">发布 Macintosh</p>
                      </div>
                    </li>
                    <li class="vt-timeline-item">
                      <div class="vt-timeline-item-tail"></div>
                      <div class="vt-timeline-item-head vt-timeline-item-head-blue"></div>
                      <div class="vt-timeline-item-content">
                        <p class="time">2007年</p>
                        <p class="content">发布 iPhone</p>
                      </div>
                    </li>
                    <li class="vt-timeline-item">
                      <div class="vt-timeline-item-tail"></div>
                      <div class="vt-timeline-item-head vt-timeline-item-head-blue"></div>
                      <div class="vt-timeline-item-content">
                        <p class="time">2010年</p>
                        <p class="content">发布 iPad</p>
                      </div>
                    </li>
                    <li class="vt-timeline-item">
                      <div class="vt-timeline-item-tail"></div>
                      <div class="vt-timeline-item-head vt-timeline-item-head-blue"></div>
                      <div class="vt-timeline-item-content">
                        <p class="time">2011年10月5日</p>
                        <p class="content">史蒂夫·乔布斯去世</p>
                      </div>
                    </li>
                  </ul>
                </div>
                <div class="col-xl-6">
                  <ul class="vt-timeline">
                    <li class="vt-timeline-item">
                      <div class="vt-timeline-item-tail"></div>
                      <div class="vt-timeline-item-head vt-timeline-item-head-green"></div>
                      <div class="vt-timeline-item-content">发布1.0版本</div>
                    </li>
                    <li class="vt-timeline-item">
                      <div class="vt-timeline-item-tail"></div>
                      <div class="vt-timeline-item-head vt-timeline-item-head-green"></div>
                      <div class="vt-timeline-item-content">发布2.0版本</div>
                    </li>
                    <li class="vt-timeline-item">
                      <div class="vt-timeline-item-tail"></div>
                      <div class="vt-timeline-item-head vt-timeline-item-head-red"></div>
                      <div class="vt-timeline-item-content">严重故障</div>
                    </li>
                    <li class="vt-timeline-item">
                      <div class="vt-timeline-item-tail"></div>
                      <div class="vt-timeline-item-head vt-timeline-item-head-blue"></div>
                      <div class="vt-timeline-item-content">发布3.0版本</div>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="row">
                <div class="col-xl-6">
                  <ul class="vt-timeline vt-timeline-pending">
                    <li class="vt-timeline-item">
                      <div class="vt-timeline-item-tail"></div>
                      <div class="vt-timeline-item-head vt-timeline-item-head-blue"></div>
                      <div class="vt-timeline-item-content">发布1.0版本</div>
                    </li>
                    <li class="vt-timeline-item">
                      <div class="vt-timeline-item-tail"></div>
                      <div class="vt-timeline-item-head vt-timeline-item-head-blue"></div>
                      <div class="vt-timeline-item-content">发布2.0版本</div>
                    </li>
                    <li class="vt-timeline-item">
                      <div class="vt-timeline-item-tail"></div>
                      <div class="vt-timeline-item-head vt-timeline-item-head-blue"></div>
                      <div class="vt-timeline-item-content">发布3.0版本</div>
                    </li>
                    <li class="vt-timeline-item">
                      <div class="vt-timeline-item-tail"></div>
                      <div class="vt-timeline-item-head vt-timeline-item-head-blue"></div>
                      <div class="vt-timeline-item-content"><a href="#">查看更多</a></div>
                    </li>
                  </ul>
                </div>
                <div class="col-xl-6">
                  <ul class="vt-timeline">
                    <li class="vt-timeline-item">
                      <div class="vt-timeline-item-tail"></div>
                      <div class="vt-timeline-item-head vt-timeline-item-head-custom vt-timeline-item-head-green"><i
                          class="vt-iconfont icon-task"></i></div>
                      <div class="vt-timeline-item-content"> <span>发布里程碑版本</span></div>
                    </li>
                    <li class="vt-timeline-item">
                      <div class="vt-timeline-item-tail"></div>
                      <div class="vt-timeline-item-head vt-timeline-item-head-blue"></div>
                      <div class="vt-timeline-item-content">发布1.0版本</div>
                    </li>
                    <li class="vt-timeline-item">
                      <div class="vt-timeline-item-tail"></div>
                      <div class="vt-timeline-item-head vt-timeline-item-head-blue"></div>
                      <div class="vt-timeline-item-content">发布2.0版本</div>
                    </li>
                    <li class="vt-timeline-item">
                      <div class="vt-timeline-item-tail"></div>
                      <div class="vt-timeline-item-head vt-timeline-item-head-blue"></div>
                      <div class="vt-timeline-item-content">发布3.0版本</div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="pre">
              <ol>
                <li>看demo源码</li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
        </div>

        <div id="poptip">
          <div class="page_tit">气泡提示 Poptip</div>
          <div class="table_row">
            <div class="page_tit3">.vt-poptip</div>
            <div class="page_tit3">x-placement="top-start top top-end | right-start right right-end"</div>
            <div class="page_tit3">x-placement="bottom-start bottom bottom-end | left-start left left-end"</div>
            <div class="example">
              <div class="vt-poptip">
                <div class="vt-poptip-rel">
                  <button type="button" class="vt-button vt-round"><span>hover 激活, x-placement="bottom"</span>
                  </button>
                </div>
                <div class="vt-poptip-popper show" x-placement="bottom">
                  <div class="vt-poptip-content">
                    <div class="vt-poptip-arrow"></div>

                    <div class="vt-poptip-inner">
                      <div class="vt-poptip-title">
                        <div class="vt-poptip-title-inner">提示标题</div>
                      </div>
                      <div class="vt-poptip-body">
                        <div class="vt-poptip-body-content">
                          <div class="vt-poptip-body-content-inner">提示内容</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="pre">
              <ol>
                <li>看demo源码</li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
        </div>

        <div id="menu">
          <div class="page_tit">菜单 Menu</div>
          <div class="table_row">
            <div class="page_tit3">.vt-menu | .list-show 非弹出菜单</div>
            <div class="example">
              <div class="row">
                <div class="col-xl-6">
                  <ul class="vt-menu" style="width:220px;">
                    <li class="vt-menu-header">
                      <div class="item-header"><span class="vt-iconfont icon-work"></span>MenuHeader</div>
                    </li>
                    <li class="vt-menu-item">
                      <div class="item-header">
                        <span class="vt-iconfont icon-work"></span>
                        <span class="item-header-title">MenuItem</span>
                        <span class="vt-iconfont icon-arrow-right-bold color-dark-light"></span>
                      </div>
                      <ul class="vt-menu-sub show" style="transform: translate3d(230px, -46px, 0);">
                        <li class="vt-menu-sub-item">
                          <div class="item-header active">
                            <span class="item-header-title">SMenuItem</span>
                            <span class="vt-iconfont icon-arrow-right-bold color-dark-light"></span>
                          </div>
                          <ul class="vt-menu-sub show" style="transform: translate3d(210px, -46px, 0);">
                            <li class="vt-menu-sub-item">
                              <div class="item-header">
                                <span class="item-header-title">SMenuItem</span>
                              </div>
                            </li>
                            <li class="vt-menu-sub-item">
                              <div class="item-header active">
                                <span class="item-header-title">SMenuItem</span>
                              </div>
                            </li>
                            <li class="vt-menu-sub-item">
                              <div class="item-header">
                                <span class="item-header-title">SMenuItem</span>
                              </div>
                            </li>
                            <li class="vt-menu-sub-item">
                              <div class="item-header">
                                <span class="item-header-title">SMenuItem</span>
                              </div>
                            </li>
                          </ul>
                        </li>
                        <li class="vt-menu-sub-item">
                          <div class="item-header">
                            <span class="item-header-title">SMenuItem</span>
                          </div>
                        </li>
                        <li class="vt-menu-sub-item">
                          <div class="item-header">
                            <span class="item-header-title">SMenuItem</span>
                          </div>
                        </li>
                        <li class="vt-menu-sub-item">
                          <div class="item-header">
                            <span class="item-header-title">SMenuItem</span>
                          </div>
                        </li>
                      </ul>
                    </li>
                    <li class="vt-menu-item">
                      <div class="item-header active">
                        <span class="vt-iconfont icon-work"></span>
                        <span class="item-header-title">MenuItem</span>
                      </div>
                    </li>
                    <li class="vt-menu-item">
                      <div class="item-header">
                        <span class="vt-iconfont icon-work"></span>
                        <span class="item-header-title">MenuItem</span>
                      </div>
                      <ul class="vt-menu-sub list-show">
                        <li class="vt-menu-sub-item">
                          <div class="item-header">
                            <span class="item-header-title">1SMenuItem</span>
                            <span class="vt-iconfont icon-arrow-down-bold color-dark-light"></span>
                          </div>
                          <ul class="vt-menu-sub list-show">
                            <li class="vt-menu-sub-item">
                              <div class="item-header active">
                                <span class="item-header-title">1-1SMenuItem</span>
                              </div>
                            </li>
                            <li class="vt-menu-sub-item">
                              <div class="item-header">
                                <span class="item-header-title">1-1SMenuItem</span>
                              </div>
                            </li>
                            <li class="vt-menu-sub-item">
                              <div class="item-header">
                                <span class="item-header-title">1-1SMenuItem</span>
                              </div>
                            </li>
                            <li class="vt-menu-sub-item">
                              <div class="item-header">
                                <span class="item-header-title">1-1SMenuItem</span>
                              </div>
                            </li>
                          </ul>
                        </li>
                        <li class="vt-menu-sub-item">
                          <div class="item-header">
                            <span class="item-header-title">2SMenuItem</span>
                          </div>
                        </li>
                        <li class="vt-menu-sub-item">
                          <div class="item-header">
                            <span class="item-header-title">3SMenuItem</span>
                          </div>
                        </li>
                        <li class="vt-menu-sub-item">
                          <div class="item-header">
                            <span class="item-header-title">4SMenuItem</span>
                          </div>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </div>
              </div>

            </div>
            <div class="pre">
              <ol>
                <li>看demo源码</li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
        </div>

        <div id="circle">
          <div class="page_tit">进度环 Circle</div>
          <div class="table_row">
            <div class="page_tit3">.vt-chart-circle</div>
            <div class="example">
              <div class="vt-chart-circle" style="width: 120px; height: 120px;"><svg viewBox="0 0 100 100">
                  <path d="M 50,50 m 0,-47
                              a 47,47 0 1 1 0,94
                              a 47,47 0 1 1 0,-94" stroke="#eaeef2" stroke-width="5" fill-opacity="0"></path>
                  <path d="M 50,50 m 0,-47
                              a 47,47 0 1 1 0,94
                              a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke="#2d8cf0" stroke-width="6"
                    fill-opacity="0"
                    style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 59.0619px; transition: stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease 0s;">
                  </path>
                </svg>
                <div class="vt-chart-circle-inner"><span class="demo-circle-inner" style="font-size: 24px;">80%</span>
                </div>
              </div>

              <div class="vt-chart-circle" style="width: 120px; height: 120px;"><svg viewBox="0 0 100 100">
                  <path d="M 50,50 m 0,-47
                              a 47,47 0 1 1 0,94
                              a 47,47 0 1 1 0,-94" stroke="#eaeef2" stroke-width="5" fill-opacity="0"></path>
                  <path d="M 50,50 m 0,-47
                              a 47,47 0 1 1 0,94
                              a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke="#5cb85c" stroke-width="6"
                    fill-opacity="0"
                    style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 0px; transition: stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease 0s;">
                  </path>
                </svg>
                <div class="vt-chart-circle-inner"><i class="vt-iconfont icon-success color-green"
                    style="font-size: 60px;"></i></div>
              </div>

              <div class="vt-chart-circle" style="width: 120px; height: 120px;"><svg viewBox="0 0 100 100">
                  <path d="M 50,50 m 0,-47
                              a 47,47 0 1 1 0,94
                              a 47,47 0 1 1 0,-94" stroke="#eaeef2" stroke-width="5" fill-opacity="0"></path>
                  <path d="M 50,50 m 0,-47
                              a 47,47 0 1 1 0,94
                              a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke="#fd7e14" stroke-width="6"
                    fill-opacity="0"
                    style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 191.951px; transition: stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease 0s;">
                  </path>
                </svg>
                <div class="vt-chart-circle-inner"><span class="demo-circle-inner"><i
                      class="vt-iconfont icon-stop color-orange" style="font-size: 60px;"></i></span>
                </div>
              </div>

              <div class="vt-chart-circle" style="width: 120px; height: 120px;"><svg viewBox="0 0 100 100">
                  <path d="M 50,50 m 0,47
                              a 47,47 0 1 1 0,-94
                              a 47,47 0 1 1 0,94" stroke="#eaeef2" stroke-width="5" fill-opacity="0"
                    style="stroke-dasharray: 220.31px, 295.31px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s ease 0s;">
                  </path>
                  <path d="M 50,50 m 0,47
                              a 47,47 0 1 1 0,-94
                              a 47,47 0 1 1 0,94" stroke-linecap="round" stroke="#2d8cf0" stroke-width="6"
                    fill-opacity="0"
                    style="stroke-dasharray: 176.248px, 295.31px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s, stroke-width 0.06s ease 0.6s;">
                  </path>
                </svg>
                <div class="vt-chart-circle-inner"><span class="demo-circle-inner" style="font-size: 24px;">80%</span>
                </div>
              </div>
            </div>
            <div class="pre">
              <ol>
                <li>看demo源码</li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
        </div>

        <div id="carousel">
          <div class="page_tit">跑马灯 Carousel</div>
          <div class="table_row">
            <div class="page_tit3">.vt-carousel</div>
            <div class="example">
              <div style="width:338px;height:200px;" class="back-gray color-white">
                <div class="vt-carousel">
                  <button type="button" class="left vt-carousel-arrow vt-carousel-arrow-hover"><i
                      class="vt-iconfont icon-arrow-left-bold"></i></button>
                  <div class="vt-carousel-list">
                    <div class="vt-carousel-track higher"
                      style="width: 1352px; transform: translate3d(0px, 0px, 0px); transition: transform 500ms ease 0s; visibility: visible;">
                      <div class="vt-carousel-item" style="width: 338px; left: 0px;">
                        <div class="demo-carousel">1</div>
                      </div>
                      <div class="vt-carousel-item" style="width: 338px; left: 0px;">
                        <div class="demo-carousel">2</div>
                      </div>
                      <div class="vt-carousel-item" style="width: 338px; left: 0px;">
                        <div class="demo-carousel">3</div>
                      </div>
                      <div class="vt-carousel-item" style="width: 338px; left: 0px;">
                        <div class="demo-carousel">4</div>
                      </div>
                    </div>
                    <div class="vt-carousel-track"
                      style="width: 1352px; transform: translate3d(-1px, 0px, 0px); transition: transform 500ms ease 0s; position: absolute;">
                      <div class="vt-carousel-item" style="width: 338px; left: 0px;">
                        <div class="demo-carousel">1</div>
                      </div>
                      <div class="vt-carousel-item" style="width: 338px; left: 0px;">
                        <div class="demo-carousel">2</div>
                      </div>
                      <div class="vt-carousel-item" style="width: 338px; left: 0px;">
                        <div class="demo-carousel">3</div>
                      </div>
                      <div class="vt-carousel-item" style="width: 338px; left: 0px;">
                        <div class="demo-carousel">4</div>
                      </div>
                    </div>
                  </div>
                  <button type="button" class="right vt-carousel-arrow vt-carousel-arrow-hover"><i
                      class="vt-iconfont icon-arrow-right-bold"></i></button>
                  <ul class="vt-carousel-dots vt-carousel-dots-inside">
                    <li class="vt-carousel-active"><button type="button" class=""></button></li>
                    <li class=""><button type="button" class=""></button></li>
                    <li class=""><button type="button" class=""></button></li>
                    <li class=""><button type="button" class=""></button></li>
                  </ul>
                </div>
              </div>

            </div>
            <div class="pre">
              <ol>
                <li>看demo源码</li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
        </div>

        <div id="tag">
          <div class="page_tit">标签 Tag</div>
          <div class="table_row">
            <div class="page_tit3">.vt-tag</div>
            <div class="example">
              <div>
                <div class="vt-tag vt-tag-default vt-tag-checked">
                  <span class="vt-tag-text">default</span>

                </div>
                <div class="vt-tag vt-tag-primary vt-tag-checked">
                  <span class="vt-tag-text vt-tag-color-white">primary</span>

                </div>
                <div class="vt-tag vt-tag-success vt-tag-checked">
                  <span class="vt-tag-text vt-tag-color-white">success</span>

                </div>
                <div class="vt-tag vt-tag-error vt-tag-checked">
                  <span class="vt-tag-text vt-tag-color-white">error</span>

                </div>
                <div class="vt-tag vt-tag-warning vt-tag-checked">
                  <span class="vt-tag-text vt-tag-color-white">warning</span>

                </div>
                <div class="vt-tag vt-tag-magenta vt-tag-checked">
                  <span class="vt-tag-text">magenta</span>

                </div>
                <div class="vt-tag vt-tag-red vt-tag-checked">
                  <span class="vt-tag-text vt-tag-color-white">red</span>

                </div>
                <div class="vt-tag vt-tag-volcano vt-tag-checked">
                  <span class="vt-tag-text">volcano</span>

                </div>
                <div class="vt-tag vt-tag-orange vt-tag-checked">
                  <span class="vt-tag-text">orange</span>

                </div>
                <div class="vt-tag vt-tag-gold vt-tag-checked">
                  <span class="vt-tag-text">gold</span>

                </div>
                <div class="vt-tag vt-tag-yellow vt-tag-checked">
                  <span class="vt-tag-text vt-tag-color-white">yellow</span>

                </div>
                <div class="vt-tag vt-tag-lime vt-tag-checked">
                  <span class="vt-tag-text">lime</span>

                </div>
                <div class="vt-tag vt-tag-green vt-tag-checked">
                  <span class="vt-tag-text vt-tag-color-white">green</span>

                </div>
                <div class="vt-tag vt-tag-cyan vt-tag-checked">
                  <span class="vt-tag-text">cyan</span>

                </div>
                <div class="vt-tag vt-tag-blue vt-tag-checked">
                  <span class="vt-tag-text vt-tag-color-white">blue</span>

                </div>
                <div class="vt-tag vt-tag-geekblue vt-tag-checked">
                  <span class="vt-tag-text">geekblue</span>

                </div>
                <div class="vt-tag vt-tag-purple vt-tag-checked">
                  <span class="vt-tag-text">purple</span>

                </div>
                <div class="vt-tag vt-tag-checked"
                  style="background: rgb(255, 162, 211); border-width: 1px; border-style: solid; border-color: rgb(255, 162, 211); color: rgb(255, 255, 255);">
                  <span class="vt-tag-text vt-tag-color-white" style="color: rgb(255, 255, 255);">Custom
                    Color</span>

                </div> <br><br>
                <div class="vt-tag vt-tag-primary vt-tag-border vt-tag-closable vt-tag-checked">
                  <span class="vt-tag-text vt-tag-color-primary">标签一</span> <i
                    class="vt-iconfont icon-close vt-tag-color-primary"></i>
                </div>
                <div class="vt-tag vt-tag-success vt-tag-border vt-tag-closable vt-tag-checked">
                  <span class="vt-tag-text vt-tag-color-success">标签二</span> <i
                    class="vt-iconfont icon-close vt-tag-color-success"></i>
                </div>
                <div class="vt-tag vt-tag-error vt-tag-border vt-tag-closable vt-tag-checked">
                  <span class="vt-tag-text vt-tag-color-error">标签三</span> <i
                    class="vt-iconfont icon-close vt-tag-color-error"></i>
                </div>
                <div class="vt-tag vt-tag-warning vt-tag-border vt-tag-closable vt-tag-checked">
                  <span class="vt-tag-text vt-tag-color-warning">标签四</span> <i
                    class="vt-iconfont icon-close vt-tag-color-warning"></i>
                </div> <br><br>
                <div class="vt-tag vt-tag-primary vt-tag-dot vt-tag-closable vt-tag-checked"><span
                    class="vt-tag-dot-inner"></span> <span class="vt-tag-text">标签一</span> <i
                    class="vt-iconfont icon-close"></i></div>
                <div class="vt-tag vt-tag-success vt-tag-dot vt-tag-closable vt-tag-checked"><span
                    class="vt-tag-dot-inner"></span> <span class="vt-tag-text">标签二</span> <i
                    class="vt-iconfont icon-close"></i></div>
                <div class="vt-tag vt-tag-error vt-tag-dot vt-tag-closable vt-tag-checked"><span
                    class="vt-tag-dot-inner"></span> <span class="vt-tag-text">标签三</span> <i
                    class="vt-iconfont icon-close"></i></div>
                <div class="vt-tag vt-tag-warning vt-tag-dot vt-tag-closable vt-tag-checked"><span
                    class="vt-tag-dot-inner"></span> <span class="vt-tag-text">标签四</span> <i
                    class="vt-iconfont icon-close"></i></div>
              </div>
            </div>
            <div class="pre">
              <ol>
                <li>看demo源码</li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
        </div>

        <div id="dropdown">
          <div class="page_tit">模拟下拉框</div>
          <div class="table_row">
            <div class="page_tit3">.vt-dropdown | .vt-dropdown-menu.show 显示 | .vt-dropdown-menu.position-absolute 悬浮
            </div>
            <div class="example">
              <div class="row">
                <div class="col-xl-6">
                  <div class="vt-dropdown">
                    <div class="vt-dropdown-button">
                      <button class="vt-button vt-round">
                        <span class="vt-iconfont icon-add"></span>
                        <span class="vt-iconfont icon-arrow-down"></span>
                      </button>
                    </div>
                    <div class="vt-dropdown-menu show">
                      <div class="vt-dropdown-inner">
                        <ul class="vt-dropdown-contents">
                          <li class="dropdown-item">
                            <div class="dropdown-header">Header</div>
                          </li>
                          <li class="dropdown-item">
                            <div class="dropdown-item">
                              <a href="#">Item</a>
                            </div>
                          </li>
                          <li class="dropdown-item">
                            <div class="dropdown-item">
                              <a href="#">Item</a>
                            </div>
                          </li>
                          <li class="dropdown-divider"></li>
                          <li class="dropdown-item">
                            <div class="dropdown-header">Header</div>
                          </li>
                          <li class="dropdown-item">
                            <div class="dropdown-item">
                              <a href="#">Item</a>
                            </div>
                          </li>
                          <li class="dropdown-item">
                            <div class="dropdown-item">
                              <a href="#">Item</a>
                            </div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-xl-6">
                  <div class="vt-dropdown">
                    <div class="vt-dropdown-button"><button class="vt-button vt-round">
                        <span class="vt-dropdown-selected-header">Item</span>
                        <span class="vt-iconfont icon-arrow-down"></span>
                      </button></div>
                    <div class="vt-dropdown-menu show">
                      <div class="vt-dropdown-inner">
                        <ul class="vt-dropdown-contents">
                          <li class="dropdown-item">
                            <div class="dropdown-header">Header</div>
                          </li>
                          <li class="dropdown-item active">
                            <div class="dropdown-item">
                              <a href="#">Item</a>
                            </div>
                          </li>
                          <li class="dropdown-item">
                            <div class="dropdown-item">
                              <a href="#">Item</a>
                            </div>
                          </li>
                          <li class="dropdown-divider"></li>
                          <li class="dropdown-item">
                            <div class="dropdown-header">Header</div>
                          </li>
                          <li class="dropdown-item">
                            <div class="dropdown-item">
                              <a href="#">Item</a>
                            </div>
                          </li>
                          <li class="dropdown-item">
                            <div class="dropdown-item">
                              <a href="#">Item</a>
                            </div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-xl-6">
                  <div class="vt-dropdown">
                    <div class="vt-dropdown-button">
                      <button class="vt-button vt-round">
                        <span class="vt-dropdown-selected-header">Header <span
                            class="vt-iconfont icon-arrow-right"></span>
                          Item</span>
                        <span class="vt-iconfont icon-arrow-down"></span>
                      </button>
                    </div>
                    <div class="vt-dropdown-menu show">
                      <div class="vt-dropdown-inner">
                        <ul class="vt-dropdown-contents">
                          <li class="dropdown-item">
                            <div class="dropdown-header">Header</div>
                          </li>
                          <li class="dropdown-item active">
                            <div class="dropdown-item">
                              <a href="#">Item</a>
                            </div>
                          </li>
                          <li class="dropdown-item">
                            <div class="dropdown-item">
                              <a href="#">Item</a>
                            </div>
                          </li>
                          <li class="dropdown-divider"></li>
                          <li class="dropdown-item">
                            <div class="dropdown-header">Header</div>
                          </li>
                          <li class="dropdown-item">
                            <div class="vt-input-group">
                              <input type="text" class="vt-input" placeholder="Recipient's username"
                                aria-label="Recipient's username" aria-describedby="basic-addon2">
                              <div class="vt-input-group-append"><button class="vt-button vt-round">按钮</button></div>
                            </div>
                          </li>
                          <li class="dropdown-item">
                            <div class="dropdown-item">
                              <a href="#">Item</a>
                            </div>
                          </li>
                          <li class="dropdown-item">
                            <div class="dropdown-header">Header</div>
                          </li>
                          <li class="dropdown-item">
                            <div class="dropdown-item">
                              <a href="#">Item</a>
                            </div>
                          </li>
                          <li class="dropdown-item">
                            <div class="dropdown-item">
                              <a href="#">Item</a>
                            </div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-xl-6">
                  <div class="vt-dropdown">
                    <div class="vt-dropdown-button">
                      <div class="vt-button-group">
                        <button class="vt-button vt-round group-item">
                          <span class="vt-dropdown-selected-header">
                            Item</span>
                        </button>
                        <button class="vt-button vt-round group-item">
                          <span class="vt-iconfont icon-arrow-down"></span>
                        </button>
                      </div>
                    </div>
                    <div class="vt-dropdown-menu show">
                      <div class="vt-dropdown-inner">
                        <ul class="vt-dropdown-contents">
                          <li class="dropdown-item">
                            <div class="dropdown-header">Header</div>
                          </li>
                          <li class="dropdown-item active">
                            <div class="dropdown-item">
                              <a href="#">Item</a>
                            </div>
                          </li>
                          <li class="dropdown-item">
                            <div class="dropdown-item">
                              <a href="#">Item</a>
                            </div>
                          </li>
                          <li class="dropdown-divider"></li>
                          <li class="dropdown-item">
                            <div class="dropdown-header">Header</div>
                          </li>
                          <li class="dropdown-item">
                            <div class="dropdown-item">
                              <a href="#">Item</a>
                            </div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-xl-6">
                  <div class="vt-dropdown">
                    <div class="vt-dropdown-button no-border">
                      <div class="vt-button-group">
                        <button class="vt-button vt-round group-item">
                          <span class="vt-dropdown-selected-header">
                            Item</span>
                          <span class="vt-iconfont icon-arrow-down"></span>
                        </button>
                      </div>
                    </div>
                    <div class="vt-dropdown-menu show">
                      <div class="vt-dropdown-inner">
                        <ul class="vt-dropdown-contents">
                          <li class="dropdown-item">
                            <div class="dropdown-header">Header</div>
                          </li>
                          <li class="dropdown-item active">
                            <div class="dropdown-item">
                              <a href="#">Item</a>
                            </div>
                          </li>
                          <li class="dropdown-item">
                            <div class="dropdown-item">
                              <a href="#">Item</a>
                            </div>
                          </li>
                          <li class="dropdown-divider"></li>
                          <li class="dropdown-item">
                            <div class="dropdown-header">Header</div>
                          </li>
                          <li class="dropdown-item">
                            <div class="dropdown-item">
                              <a href="#">Item</a>
                            </div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-xl-6">
                  <div class="vt-dropdown vt-disabled">
                    <div class="vt-dropdown-button">
                      <div class="vt-button-group">
                        <button class="vt-button vt-round group-item">
                          <span class="vt-dropdown-selected-header">
                            Item</span>
                        </button>
                        <button class="vt-button vt-round group-item">
                          <span class="vt-iconfont icon-arrow-down"></span>
                        </button>
                      </div>
                    </div>
                    <div class="vt-dropdown-menu">
                      <div class="vt-dropdown-inner">
                        <ul class="vt-dropdown-contents">
                          <li class="dropdown-item">
                            <div class="dropdown-header">Header</div>
                          </li>
                          <li class="dropdown-item active">
                            <div class="dropdown-item">
                              <a href="#">Item</a>
                            </div>
                          </li>
                          <li class="dropdown-item">
                            <div class="dropdown-item">
                              <a href="#">Item</a>
                            </div>
                          </li>
                          <li class="dropdown-divider"></li>
                          <li class="dropdown-item">
                            <div class="dropdown-header">Header</div>
                          </li>
                          <li class="dropdown-item">
                            <div class="dropdown-item">
                              <a href="#">Item</a>
                            </div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </div>
            <div class="pre">
              <ol>
                <li>看demo源码</li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
        </div>

        <div id="rate" class="maindiv">
          <div class="page_tit">评分 Rate</div>
          <div class="table_row">
            <div class="page_tit3">.vt-rate
            </div>
            <div class="example">
              <div class="row">
                <div class="col-xl-4">
                  <div role="radiogroup" class="vt-rate" tabindex="0" aria-disabled="false" aria-readonly="false">
                    <div role="radio" class="vt-rate__item"><i
                        class="vt-badge__wrapper vt-iconfont icon-favorite-filling vt-rate__icon vt-rate__icon--full">
                      </i>
                    </div>
                    <div role="radio" class="vt-rate__item"><i
                        class="vt-badge__wrapper vt-iconfont icon-favorite-filling vt-rate__icon vt-rate__icon--full">
                      </i>
                    </div>
                    <div role="radio" class="vt-rate__item"><i
                        class="vt-badge__wrapper vt-iconfont icon-favorite vt-rate__icon">
                      </i><i
                        class="vt-badge__wrapper vt-iconfont icon-favorite-filling vt-rate__icon vt-rate__icon--half vt-rate__icon--full"
                        style="width: 0.5em;">
                      </i></div>
                    <div role="radio" class="vt-rate__item"><i
                        class="vt-badge__wrapper vt-iconfont icon-favorite vt-rate__icon">
                      </i>
                    </div>
                    <div role="radio" class="vt-rate__item"><i
                        class="vt-badge__wrapper vt-iconfont icon-favorite vt-rate__icon">
                      </i>
                    </div>
                  </div>
                </div>
                <div class="col-xl-4">
                  <div role="radiogroup" class="vt-rate">
                    <div role="radio" class="vt-rate__item"><i
                        class="vt-badge__wrapper vt-iconfont icon-favorite-filling vt-rate__icon vt-rate__icon--full">
                      </i>
                    </div>
                    <div role="radio" class="vt-rate__item"><i
                        class="vt-badge__wrapper vt-iconfont icon-favorite-filling vt-rate__icon vt-rate__icon--full">
                      </i>
                    </div>
                    <div role="radio" class="vt-rate__item"><i
                        class="vt-badge__wrapper vt-iconfont icon-favorite-filling vt-rate__icon vt-rate__icon--full">
                      </i></div>
                    <div role="radio" class="vt-rate__item"><i
                        class="vt-badge__wrapper vt-iconfont icon-favorite-filling vt-rate__icon vt-rate__icon--full vt-rate__icon--disabled">
                      </i>
                    </div>
                    <div role="radio" class="vt-rate__item"><i
                        class="vt-badge__wrapper vt-iconfont icon-favorite-filling vt-rate__icon vt-rate__icon--full vt-rate__icon--disabled">
                      </i>
                    </div>
                  </div>
                </div>
                <div class="col-xl-4">
                  <div role="radiogroup" class="vt-rate" tabindex="0" aria-disabled="false" aria-readonly="false">
                    <div role="radio" class="vt-rate__item"><i
                        class="vt-badge__wrapper vt-iconfont icon-favorite-filling vt-rate__icon vt-rate__icon--full">
                      </i>
                    </div>
                    <div role="radio" class="vt-rate__item"><i
                        class="vt-badge__wrapper vt-iconfont icon-favorite-filling vt-rate__icon vt-rate__icon--full">
                      </i>
                    </div>
                    <div role="radio" class="vt-rate__item"><i
                        class="vt-badge__wrapper vt-iconfont icon-favorite-filling vt-rate__icon vt-rate__icon--full">
                      </i></div>
                    <div role="radio" class="vt-rate__item"><i
                        class="vt-badge__wrapper vt-iconfont icon-favorite-filling vt-rate__icon vt-rate__icon--full">
                      </i>
                    </div>
                    <div role="radio" class="vt-rate__item"><i
                        class="vt-badge__wrapper vt-iconfont icon-favorite-filling vt-rate__icon vt-rate__icon--full">
                      </i>
                    </div>
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-xl-4">
                  <div role="radiogroup" class="vt-rate color-green" tabindex="0" aria-disabled="false"
                    aria-readonly="false">
                    <div role="radio" class="vt-rate__item"><i
                        class="vt-badge__wrapper vt-iconfont icon-aixin1 vt-rate__icon vt-rate__icon--full color-yellow">
                      </i>
                    </div>
                    <div role="radio" class="vt-rate__item"><i
                        class="vt-badge__wrapper vt-iconfont icon-aixin1 vt-rate__icon vt-rate__icon--full color-yellow">
                      </i>
                    </div>
                    <div role="radio" class="vt-rate__item"><i
                        class="vt-badge__wrapper vt-iconfont icon-aixin1 vt-rate__icon vt-rate__icon--full color-yellow">
                      </i></div>
                    <div role="radio" class="vt-rate__item"><i
                        class="vt-badge__wrapper vt-iconfont icon-aixin vt-rate__icon vt-rate__icon--full color-yellow">
                      </i>
                    </div>
                    <div role="radio" class="vt-rate__item"><i
                        class="vt-badge__wrapper vt-iconfont icon-aixin vt-rate__icon vt-rate__icon--full color-yellow">
                      </i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="pre">
              <ol>
                <li>看demo源码</li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
        </div>

        <div id="input" class="maindiv">
          <div class="page_tit">文本框 &lt;input&gt;</div>
          <div class="table_row">
            <div class="page_tit2">默认样式</div>
            <div class="page_tit3">长度为<span>200px</span>，高度为<span>34px</span></div>
            <div class="example">
              <input class="vt-input" type="text" placeholder="默认样式" />
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;input class=&quot;vt-input&quot; /&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">圆角样式</div>
            <div class="page_tit3">border-radius为<span>5px</span></div>
            <div class="example">
              <input class="vt-input vt-round" type="text" placeholder="圆角样式" />
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;input class=&quot;vt-input <span>vt-round</span>&quot; /&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">宽度</div>
            <div class="page_tit3"><code>vt-width1</code>长度为<span>250px</span>，每次增加<span>50px</span></div>
            <div class="example">
              <input class="vt-input vt-width1" type="text" placeholder="vt-width1: 250px" /><br><br>
              <input class="vt-input vt-width2" type="text" placeholder="vt-width2: 300px" /><br><br>
              <input class="vt-input vt-width3" type="text" placeholder="vt-width3: 350px" /><br><br>
              <input class="vt-input vt-width4" type="text" placeholder="vt-width4: 400px" /><br><br>
              <input class="vt-input vt-width5" type="text" placeholder="vt-width5: 450px" /><br><br>
              <input class="vt-input vt-width6" type="text" placeholder="vt-width6: 500px" />
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;input class=&quot;vt-input <span>vt-width1</span>&quot; /&gt;</span></li>
                <li><span>&lt;input class=&quot;vt-input <span>vt-width2</span>&quot; /&gt;</span></li>
                <li><span>&lt;input class=&quot;vt-input <span>vt-width3</span>&quot; /&gt;</span></li>
                <li><span>&lt;input class=&quot;vt-input <span>vt-width4</span>&quot; /&gt;</span></li>
                <li><span>&lt;input class=&quot;vt-input <span>vt-width5</span>&quot; /&gt;</span></li>
                <li><span>&lt;input class=&quot;vt-input <span>vt-width6</span>&quot; /&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">高度</div>
            <div class="page_tit3"><code>vt-height1</code>高度为<span>38px</span>，每次增加<span>4px</span></div>
            <div class="example">
              <input class="vt-input vt-height1" type="text" placeholder="vt-height1: 38px" /><br><br>
              <input class="vt-input vt-height2" type="text" placeholder="vt-height2: 42px" /><br><br>
              <input class="vt-input vt-height3" type="text" placeholder="vt-height3: 46px" /><br><br>
              <input class="vt-input vt-height4" type="text" placeholder="vt-height4: 50px" />
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;input class=&quot;vt-input <span>vt-height1</span>&quot; /&gt;</span></li>
                <li><span>&lt;input class=&quot;vt-input <span>vt-height2</span>&quot; /&gt;</span></li>
                <li><span>&lt;input class=&quot;vt-input <span>vt-height3</span>&quot; /&gt;</span></li>
                <li><span>&lt;input class=&quot;vt-input <span>vt-height4</span>&quot; /&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">100%宽度</div>
            <div class="page_tit3">宽度为<span>100%</span></div>
            <div class="example">
              <input class="vt-input vt-ful" type="text" placeholder="100%宽度" />
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;input class=&quot;vt-input <span>vt-ful</span>&quot; /&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">下划线</div>
            <div class="example">
              <input class="vt-input vt-under" type="text" placeholder="下划线" />
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;input class=&quot;vt-input <span>vt-under</span>&quot; /&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">只读文本框</div>
            <div class="example">
              <input class="vt-input vt-readonly" type="text" value="只读文本框" readonly="readonly" />
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;input class=&quot;vt-input <span>vt-readonly</span>&quot; readonly=&quot;readonly&quot;
                    /&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">组合样式</div>
            <div class="page_tit3">可多个样式随意组合</div>
            <div class="example">
              <input class="vt-input vt-ful vt-round" type="text" placeholder="组合样式: 宽度100%+圆角" />
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;input class=&quot;vt-input <span>vt-ful vt-round</span>&quot; /&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">其他组合样式</div>
            <div class="page_tit3">可多个样式随意组合</div>
            <div class="example">
              <div class="vt-input-group">
                <div class="vt-input-group-prepend">
                  <span class="vt-input-group-text" id="basic-addon1">@</span>
                </div>
                <input type="text" class="vt-input" placeholder="Username" aria-label="Username"
                  aria-describedby="basic-addon1">
              </div>

              <div class="vt-input-group">
                <input type="text" class="vt-input" placeholder="Recipient's username" aria-label="Recipient's username"
                  aria-describedby="basic-addon2">
                <div class="vt-input-group-append">
                  <span class="vt-input-group-text" id="basic-addon2">@example.com</span>
                </div>
              </div>

              <label for="basic-url">Your vanity URL</label>
              <div class="vt-input-group">
                <div class="vt-input-group-prepend">
                  <span class="vt-input-group-text" id="basic-addon3">https://example.com/users/</span>
                </div>
                <input type="text" class="vt-input" id="basic-url" aria-describedby="basic-addon3">
              </div>

              <div class="vt-input-group">
                <div class="vt-input-group-prepend">
                  <span class="vt-input-group-text">$</span>
                </div>
                <input type="text" class="vt-input" aria-label="Amount (to the nearest dollar)">
                <div class="vt-input-group-append">
                  <span class="vt-input-group-text">.00</span>
                </div>
              </div>

              <div class="vt-input-group">
                <div class="vt-input-group-prepend">
                  <span class="vt-input-group-text">With textarea</span>
                </div>
                <textarea class="vt-text" aria-label="With textarea"></textarea>
              </div>

              <div class="vt-input-group mb-3">
                <div class="vt-input-group-prepend">
                  <div class="vt-input-group-text">
                    <input type="checkbox" aria-label="Checkbox for following text input">
                  </div>
                </div>
                <input type="text" class="vt-input" aria-label="Text input with checkbox">
              </div>

              <div class="vt-input-group">
                <div class="vt-input-group-prepend">
                  <div class="vt-input-group-text">
                    <input type="radio" aria-label="Radio button for following text input">
                  </div>
                </div>
                <input type="text" class="vt-input" aria-label="Text input with radio button">
              </div>

              <div class="vt-input-group">
                <div class="vt-input-group-prepend">
                  <span class="vt-input-group-text">First and last name</span>
                </div>
                <input type="text" aria-label="First name" class="vt-input">
                <input type="text" aria-label="Last name" class="vt-input">
              </div>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li>看demo源码</li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->
        </div>
        <!--input-->

        <div id="textarea" class="maindiv">
          <div class="page_tit">文本域 &lt;textarea&gt;</div>
          <div class="table_row">
            <div class="page_tit2">默认样式</div>
            <div class="page_tit3">长度为<span>200px</span>，高度为<span>80px</span></div>
            <div class="example">
              <textarea class="vt-text" placeholder="默认样式"></textarea>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;textarea class=&quot;vt-text&quot;&gt;&lt;/textarea&gt;</span></li>
              </ol>
            </div>
            <!--pre-->
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">圆角样式</div>
            <div class="page_tit3">border-radius为<span>5px</span></div>
            <div class="example">
              <textarea class="vt-text vt-round" placeholder="圆角样式"></textarea>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;textarea class=&quot;vt-text <span>vt-round</span>&quot;&gt;&lt;/textarea&gt;</span>
                </li>
              </ol>
            </div>
            <!--pre-->
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">宽度</div>
            <div class="page_tit3"><code>vt-width1</code>长度为<span>250px</span>，每次增加<span>50px</span></div>
            <div class="example">
              <textarea class="vt-text vt-width1" type="text" placeholder="vt-width1: 250px" /></textarea><br><br>
              <textarea class="vt-text vt-width2" type="text" placeholder="vt-width2: 300px" /></textarea><br><br>
              <textarea class="vt-text vt-width3" type="text" placeholder="vt-width3: 350px" /></textarea><br><br>
              <textarea class="vt-text vt-width4" type="text" placeholder="vt-width4: 400px" /></textarea><br><br>
              <textarea class="vt-text vt-width5" type="text" placeholder="vt-width5: 450px" /></textarea><br><br>
              <textarea class="vt-text vt-width6" type="text" placeholder="vt-width6: 500px" /></textarea>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;textarea class=&quot;vt-text <span>vt-width1</span>&quot; &gt;&lt;textarea&gt;</span>
                </li>
                <li><span>&lt;textarea class=&quot;vt-text <span>vt-width2</span>&quot; &gt;&lt;textarea&gt;</span>
                </li>
                <li><span>&lt;textarea class=&quot;vt-text <span>vt-width3</span>&quot; &gt;&lt;textarea&gt;</span>
                </li>
                <li><span>&lt;textarea class=&quot;vt-text <span>vt-width4</span>&quot; &gt;&lt;textarea&gt;</span>
                </li>
                <li><span>&lt;textarea class=&quot;vt-text <span>vt-width5</span>&quot; &gt;&lt;textarea&gt;</span>
                </li>
                <li><span>&lt;textarea class=&quot;vt-text <span>vt-width6</span>&quot; &gt;&lt;textarea&gt;</span>
                </li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">高度</div>
            <div class="page_tit3"><code>vt-height1</code>高度为<span>100px</span>，每次增加<span>20px</span></div>
            <div class="example">
              <textarea class="vt-text vt-height1" type="text" placeholder="vt-height1: 100px" /></textarea><br><br>
              <textarea class="vt-text vt-height2" type="text" placeholder="vt-height2: 120px" /></textarea><br><br>
              <textarea class="vt-text vt-height3" type="text" placeholder="vt-height3: 140px" /></textarea><br><br>
              <textarea class="vt-text vt-height4" type="text" placeholder="vt-height4: 160px" /></textarea><br><br>
              <textarea class="vt-text vt-height5" type="text" placeholder="vt-height5: 180px" /></textarea><br><br>
              <textarea class="vt-text vt-height6" type="text" placeholder="vt-height6: 200px" /></textarea>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;textarea class=&quot;vt-text <span>vt-height1</span>&quot; &gt;&lt;textarea&gt;</span>
                </li>
                <li><span>&lt;textarea class=&quot;vt-text <span>vt-height2</span>&quot; &gt;&lt;textarea&gt;</span>
                </li>
                <li><span>&lt;textarea class=&quot;vt-text <span>vt-height3</span>&quot; &gt;&lt;textarea&gt;</span>
                </li>
                <li><span>&lt;textarea class=&quot;vt-text <span>vt-height4</span>&quot; &gt;&lt;textarea&gt;</span>
                </li>
                <li><span>&lt;textarea class=&quot;vt-text <span>vt-height5</span>&quot; &gt;&lt;textarea&gt;</span>
                </li>
                <li><span>&lt;textarea class=&quot;vt-text <span>vt-height6</span>&quot; &gt;&lt;textarea&gt;</span>
                </li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">100%宽度</div>
            <div class="page_tit3">长度为<span>100%</span></div>
            <div class="example">
              <textarea class="vt-text vt-ful" placeholder="100%宽度"></textarea>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;textarea class=&quot;vt-text <span>vt-ful</span>&quot;&gt;&lt;/textarea&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">下划线</div>
            <div class="example">
              <textarea class="vt-text vt-under" placeholder="下划线"></textarea>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;textarea class=&quot;vt-text <span>vt-under</span>&quot; &gt;&lt;/textarea&gt;</span>
                </li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">组合样式</div>
            <div class="page_tit3">可多个样式随意组合</div>
            <div class="example">
              <textarea class="vt-text vt-ful vt-round" placeholder="组合样式: 宽度100%+圆角"></textarea>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;textarea class=&quot;vt-text <span>vt-ful
                      vt-round</span>&quot;&gt;&lt;/textarea&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->
        </div>
        <!--textarea-->

        <div id="select">
          <div class="page_tit">下拉框 &lt;select&gt;</div>
          <div class="table_row">
            <div class="page_tit2">默认样式</div>
            <div class="page_tit3">长度为<span>200px</span>，高度为<span>34px</span></div>
            <div class="example">
              <select class="vt-select">
                <option>默认样式</option>
                <option>选项2</option>
                <option>选项3</option>
              </select>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;select class=&quot;vt-select&quot;&gt;</span></li>
                <li class="level2"><span>&lt;option&gt;选项1&lt;/option&gt;</span></li>
                <li class="level2"><span>&lt;option&gt;选项2&lt;/option&gt;</span></li>
                <li class="level2"><span>&lt;option&gt;选项3&lt;/option&gt;</span></li>
                <li><span>&lt;/select&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">圆角样式</div>
            <div class="page_tit3">border-radius为<span>5px</span></div>
            <div class="example">
              <select class="vt-select vt-round">
                <option>圆角样式</option>
                <option>选项2</option>
                <option>选项3</option>
              </select>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;select class=&quot;vt-select <span>vt-round</span>&quot;&gt;</span></li>
                <li class="level2"><span>&lt;option&gt;选项1&lt;/option&gt;</span></li>
                <li class="level2"><span>&lt;option&gt;选项2&lt;/option&gt;</span></li>
                <li class="level2"><span>&lt;option&gt;选项3&lt;/option&gt;</span></li>
                <li><span>&lt;/select&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">深色样式</div>
            <div class="page_tit3">适用于<span>暗色调</span>场景</div>
            <div class="example">
              <select class="vt-select vt-black">
                <option>黑色样式</option>
                <option>选项2</option>
                <option>选项3</option>
              </select>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;select class=&quot;vt-select <span>vt-black</span>&quot;&gt;</span></li>
                <li class="level2"><span>&lt;option&gt;选项1&lt;/option&gt;</span></li>
                <li class="level2"><span>&lt;option&gt;选项2&lt;/option&gt;</span></li>
                <li class="level2"><span>&lt;option&gt;选项3&lt;/option&gt;</span></li>
                <li><span>&lt;/select&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">宽度</div>
            <div class="page_tit3"><code>vt-width1</code>长度为<span>250px</span>，每次增加<span>50px</span></div>
            <div class="example">
              <select class="vt-select vt-width1">
                <option>vt-width1: 250px</option>
                <option>选项2</option>
                <option>选项3</option>
              </select><br><br>
              <select class="vt-select vt-width2">
                <option>vt-width2: 300px</option>
                <option>选项2</option>
                <option>选项3</option>
              </select><br><br>
              <select class="vt-select vt-width3">
                <option>vt-width3: 350px</option>
                <option>选项2</option>
                <option>选项3</option>
              </select><br><br>
              <select class="vt-select vt-width4">
                <option>vt-width4: 400px</option>
                <option>选项2</option>
                <option>选项3</option>
              </select><br><br>
              <select class="vt-select vt-width5">
                <option>vt-width5: 450px</option>
                <option>选项2</option>
                <option>选项3</option>
              </select><br><br>
              <select class="vt-select vt-width6">
                <option>vt-width6: 500px</option>
                <option>选项2</option>
                <option>选项3</option>
              </select>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;select class=&quot;vt-select <span>vt-width1</span>&quot;&gt;</span></li>
                <li class="level2"><span>&lt;option&gt;选项1&lt;/option&gt;</span></li>
                <li class="level2"><span>&lt;option&gt;选项2&lt;/option&gt;</span></li>
                <li class="level2"><span>&lt;option&gt;选项3&lt;/option&gt;</span></li>
                <li><span>&lt;/select&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">高度</div>
            <div class="page_tit3"><code>vt-height1</code>高度为<span>38px</span>，每次增加<span>4px</span></div>
            <div class="example">
              <select class="vt-select vt-height1">
                <option>vt-height1: 38px</option>
                <option>选项2</option>
                <option>选项3</option>
              </select><br><br>
              <select class="vt-select vt-height2">
                <option>vt-height2: 42px</option>
                <option>选项2</option>
                <option>选项3</option>
              </select><br><br>
              <select class="vt-select vt-height3">
                <option>vt-height3: 46px</option>
                <option>选项2</option>
                <option>选项3</option>
              </select><br><br>
              <select class="vt-select vt-height4">
                <option>vt-height4: 50px</option>
                <option>选项2</option>
                <option>选项3</option>
              </select>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;select class=&quot;vt-select <span>vt-height1</span>&quot;&gt;</span></li>
                <li class="level2"><span>&lt;option&gt;选项1&lt;/option&gt;</span></li>
                <li class="level2"><span>&lt;option&gt;选项2&lt;/option&gt;</span></li>
                <li class="level2"><span>&lt;option&gt;选项3&lt;/option&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">100%宽度</div>
            <div class="page_tit3">长度为<span>100%</span></div>
            <div class="example">
              <select class="vt-select vt-ful">
                <option>100%宽度</option>
                <option>选项2</option>
                <option>选项3</option>
              </select>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;select class=&quot;vt-select <span>vt-ful</span>&quot;&gt;</span></li>
                <li class="level2"><span>&lt;option&gt;选项1&lt;/option&gt;</span></li>
                <li class="level2"><span>&lt;option&gt;选项2&lt;/option&gt;</span></li>
                <li class="level2"><span>&lt;option&gt;选项3&lt;/option&gt;</span></li>
                <li><span>&lt;/select&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">组合样式</div>
            <div class="page_tit3">可多个样式随意组合</div>
            <div class="example">
              <select class="vt-select vt-ful vt-round">
                <option>组合样式: 宽度100%+圆角</option>
                <option>选项2</option>
                <option>选项3</option>
              </select>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;select class=&quot;vt-select <span>vt-ful vt-round</span>&quot;&gt;</span></li>
                <li class="level2"><span>&lt;option&gt;选项1&lt;/option&gt;</span></li>
                <li class="level2"><span>&lt;option&gt;选项2&lt;/option&gt;</span></li>
                <li class="level2"><span>&lt;option&gt;选项3&lt;/option&gt;</span></li>
                <li><span>&lt;/select&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->
        </div>
        <!--select-->

        <div id="button" class="maindiv">
          <div class="page_tit">按钮 &lt;button&gt;</div>
          <table class="ptable">
            <tr class="first">
              <td width="180">class=""</td>
              <td width="350">样式</td>
              <td>代码</td>
            </tr>
            <tr>
              <td><code>vt-button</code></td>
              <td><button class="vt-button">默认按钮</button></td>
              <td style="white-space:nowrap;">&lt;button class=&quot;vt-button&quot;&gt;按钮&lt;/button&gt;</td>
            </tr>
            <tr>
              <td><code>vt-button</code> <code>vt-blue</code></td>
              <td><button class="vt-button vt-blue">蓝色按钮</button></td>
              <td style="white-space:nowrap;">&lt;button class=&quot;vt-button <span
                  class="red">vt-blue</span>&quot;&gt;按钮&lt;/button&gt;</td>
            </tr>
            <tr>
              <td><code>vt-button</code> <code>vt-red</code></td>
              <td><button class="vt-button vt-red">红色按钮</button></td>
              <td style="white-space:nowrap;">&lt;button class=&quot;vt-button <span
                  class="red">vt-red</span>&quot;&gt;按钮&lt;/button&gt;</td>
            </tr>
            <tr>
              <td><code>vt-button</code> <code>vt-yellow</code></td>
              <td><button class="vt-button vt-yellow">黄色按钮</button></td>
              <td style="white-space:nowrap;">&lt;button class=&quot;vt-button <span
                  class="red">vt-yellow</span>&quot;&gt;按钮&lt;/button&gt;</td>
            </tr>
            <tr>
              <td><code>vt-button</code> <code>vt-green</code></td>
              <td><button class="vt-button vt-green">绿色按钮</button></td>
              <td style="white-space:nowrap;">&lt;button class=&quot;vt-button <span
                  class="red">vt-green</span>&quot;&gt;按钮&lt;/button&gt;</td>
            </tr>
            <tr>
              <td><code>vt-button</code> <code>vt-black</code></td>
              <td><button class="vt-button vt-black">黑色按钮</button></td>
              <td style="white-space:nowrap;">&lt;button class=&quot;vt-button <span
                  class="red">vt-black</span>&quot;&gt;按钮&lt;/button&gt;</td>
            </tr>
            <tr>
              <td><code>vt-button</code> <code>vt-round</code></td>
              <td><button class="vt-button vt-round">圆角按钮</button>
              </td>
              <td style="white-space:nowrap;">&lt;button class=&quot;vt-button <span
                  class="red">vt-round</span>&quot;&gt;按钮&lt;/button&gt;</td>
            </tr>
            <tr>
              <td><code>vt-button</code> <code>vt-iconfont--left</code> <code>vt-iconfont--right</code>
              </td>
              <td> <button class="vt-button vt-round"><i
                    class="vt-iconfont icon-search vt-iconfont--left"></i>icon按钮</button>
                <button class="vt-button vt-round">icon按钮<i
                    class="vt-iconfont icon-search vt-iconfont--right"></i></button>
              </td>
              <td>&lt;button class=&quot;vt-button vt-round&quot;&gt;
                &lt;i class=&quot;vt-iconfont icon-sousou <span class="red">vt-iconfont--left</span>&quot;&gt;&lt;/i&gt;
                按钮&lt;/button&gt;</td>
            </tr>
            <tr>
              <td><code>vt-button</code> <code>vt-circle</code></td>
              <td>
                <button class="vt-button vt-circle"><i class="vt-iconfont icon-search"></i></button>
                <button class="vt-button vt-circle vt-blue"><i class="vt-iconfont icon-search"></i></button>
                <button class="vt-button vt-circle vt-red"><i class="vt-iconfont icon-search"></i></button>
                <button class="vt-button vt-circle vt-yellow"><i class="vt-iconfont icon-search"></i></button>
                <button class="vt-button vt-circle vt-green"><i class="vt-iconfont icon-search"></i></button>
                <button class="vt-button vt-circle vt-black"><i class="vt-iconfont icon-search"></i></button>
                <button class="vt-button vt-circle vt-disabled"><i class="vt-iconfont icon-search"></i></button>
                <button class="vt-button vt-circle" disabled="disabled"><i class="vt-iconfont icon-search"></i></button>
              </td>
              <td style="white-space:nowrap;">&lt;button class=&quot;vt-button <span
                  class="red">vt-circle</span>&quot;&gt;按钮&lt;/button&gt;</td>
            </tr>
            <tr>
              <td><code>vt-button</code> <code>vt-button--text</code></td>
              <td>
                <button class="vt-button vt-button--text">文本按钮</button>
                <button class="vt-button vt-button--text"><i
                    class="vt-iconfont icon-search vt-iconfont--left"></i>文本按钮</button>
                <button class="vt-button vt-button--text vt-disabled">模拟禁用文本按钮</button>
                <button class="vt-button vt-circle vt-button--text" disabled="disabled">真实禁用文本按钮</button>
                <button class="vt-button vt-circle vt-button--text"><i class="vt-iconfont icon-search"></i></button>
                <button class="vt-button vt-circle vt-button--text vt-disabled"><i
                    class="vt-iconfont icon-search"></i></button>
                <button class="vt-button vt-circle vt-button--text" disabled="disabled"><i
                    class="vt-iconfont icon-search"></i></button>
              </td>
              <td style="white-space:nowrap;">&lt;button class=&quot;vt-button <span
                  class="red">vt-button--text</span>&quot;&gt;按钮&lt;/button&gt;</td>
            </tr>
            <tr>
              <td><code>vt-button</code> <code>vt-dotted</code></td>
              <td><button class="vt-button vt-dotted">虚线按钮</button></td>
              <td style="white-space:nowrap;">&lt;button class=&quot;vt-button <span
                  class="red">vt-dotted</span>&quot;&gt;虚线按钮&lt;/button&gt;</td>
            </tr>
            <tr>
              <td><code>vt-button</code> <code>vt-disabled</code></td>
              <td><button class="vt-button vt-disabled">模拟禁用按钮</button></td>
              <td style="white-space:nowrap;">&lt;button class=&quot;vt-button <span
                  class="red">vt-disabled</span>&quot;&gt;按钮&lt;/button&gt;</td>
            </tr>
            <tr>
              <td><code>vt-button:disabled</code></td>
              <td><button class="vt-button" disabled="disabled">真禁用按钮</button></td>
              <td style="white-space:nowrap;">&lt;button class=&quot;vt-button&quot; <span
                  class="red">disabled="disabled"</span>&gt;按钮&lt;/button&gt;</td>
            </tr>
            <tr>
              <td><code>vt-button</code> <code>vt-lit</code> <code>vt-large</code></td>
              <td><button class="vt-button vt-lit">小尺寸按钮</button> <button class="vt-button">普通按钮</button> <button
                  class="vt-button vt-large">大尺寸按钮</button></td>
              <td style="white-space:nowrap;">&lt;button class=&quot;vt-button <span class="red">vt-lit</span>&quot;
                &gt;按钮&lt;/button&gt;</td>
            </tr>
            <tr>
              <td><code>vt-button</code> <code>vt-ful</code></td>
              <td><button class="vt-button vt-ful">宽度100%按钮</button></td>
              <td style="white-space:nowrap;">&lt;button class=&quot;vt-button <span
                  class="red">vt-ful</span>&quot;&gt;按钮&lt;/button&gt;</td>
            </tr>
            <tr>
              <td><code>vt-button</code> <code>vt-blue</code> <code>vt-round</code></td>
              <td><button class="vt-button vt-blue vt-round">组合样式（蓝色+圆角）按钮</button></td>
              <td style="white-space:nowrap;">&lt;button class=&quot;vt-button <span class="red">vt-blue
                  vt-round</span>&quot;&gt;按钮&lt;/button&gt;</td>
            </tr>
            <tr>
              <td><code>vt-button-group</code> <code>vt-button-group-vertical</code></td>
              <td>
                <div class="vt-button-group" role="group" aria-label="...">
                  <button type="button" class="vt-button vt-round group-item vt-blue">Left</button>
                  <button type="button" class="vt-button vt-round group-item" disabled="disabled">Middle</button>
                  <button type="button" class="vt-button vt-round group-item">Right</button>
                </div>
                <div class="vt-button-group-vertical" role="group" aria-label="...">
                  <button type="button" class="vt-button vt-round group-item vt-blue">Left</button>
                  <button type="button" class="vt-button vt-round group-item">Middle</button>
                  <button type="button" class="vt-button vt-round group-item">Right</button>
                </div>
                <div class="vt-button-group" role="group" aria-label="...">
                  <button type="button" class="vt-button vt-round group-item vt-blue vt-lit"><i
                      class="vt-iconfont icon-arrow-left-bold vt-iconfont--left"></i></button>
                  <button type="button" class="vt-button vt-round group-item vt-lit"><i
                      class="vt-iconfont icon-arrow-right-bold vt-iconfont--right"></i></button>
                </div>
                <div class="vt-button-group" role="group" aria-label="...">
                  <button type="button" class="vt-button vt-round group-item vt-blue"><i
                      class="vt-iconfont icon-arrow-left-bold vt-iconfont--left"></i></button>
                  <button type="button" class="vt-button vt-round group-item"><i
                      class="vt-iconfont icon-arrow-right-bold vt-iconfont--right"></i></button>
                </div>
                <div class="vt-button-group" role="group" aria-label="...">
                  <button type="button" class="vt-button vt-round group-item vt-blue vt-large"><i
                      class="vt-iconfont icon-arrow-left-bold vt-iconfont--left"></i></button>
                  <button type="button" class="vt-button vt-round group-item vt-large"><i
                      class="vt-iconfont icon-arrow-right-bold vt-iconfont--right"></i></button>
                </div>
              </td>
              <td>&lt;div class=&quot;vt-button-group&quot;&gt;&lt;button class=&quot;vt-button <span
                  class="red">group-item</span>&quot;&gt;按钮&lt;/button&gt;&lt;/div&gt;</td>
            </tr>
            <tr>
              <td><code>vt-button-toolbar</code></td>
              <td>
                <div class="vt-button-toolbar" role="toolbar" aria-label="...">
                  <div class="vt-button-group" role="group" aria-label="...">
                    <button type="button" class="vt-button vt-round group-item">1</button>
                    <button type="button" class="vt-button vt-round group-item">2</button>
                    <button type="button" class="vt-button vt-round group-item">3</button>
                  </div>
                  <div class="vt-button-group" role="group" aria-label="...">
                    <button type="button" class="vt-button vt-round group-item vt-blue">1</button>
                    <button type="button" class="vt-button vt-round group-item">2</button>
                  </div>
                  <div class="vt-button-group" role="group" aria-label="...">
                    <button type="button" class="vt-button vt-round group-item">1</button>
                  </div>
                </div>
              </td>
              <td>&lt;div class=&quot;vt-button-toolbar&quot;&gt;&lt;div
                class=&quot;vt-button-group&quot;&gt;&lt;button class=&quot;vt-button <span
                  class="red">group-item</span>&quot;&gt;按钮&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;</td>
            </tr>
          </table>
        </div>
        <!--button-->

        <div id="radio" class="maindiv">
          <div class="page_tit">单选框 &lt;input type="radio"&gt;</div>
          <div class="table_row">
            <table class="ptable">
              <tr class="first">
                <td width="160" rowspan="6" align="center"><strong>颜色表</strong></td>
                <td>描述</td>
                <td>class</td>
              </tr>
              <tr>
                <td>蓝色</td>
                <td><code>vt-blue</code> <code>vt-blue2</code></td>
              </tr>
              <tr>
                <td>红色</td>
                <td><code>vt-red</code> <code>vt-red2</code></td>
              </tr>
              <tr>
                <td>黄色</td>
                <td><code>vt-yellow</code> <code>vt-yellow2</code></td>
              </tr>
              <tr>
                <td>绿色</td>
                <td><code>vt-green</code> <code>vt-green2</code></td>
              </tr>
              <tr>
                <td>黑色</td>
                <td><code>vt-black</code> <code>vt-black2</code></td>
              </tr>
              <tr>
                <td colspan="3"><strong>颜色后面加 2 时，表示选中后文字一起变色，具体见下方例示代码</strong></td>
              </tr>
            </table>
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">默认样式</div>
            <div class="example">
              <span class="vt-radio"><label><input type="radio" name="radio1_1"
                    checked="checked" /><em></em><span>默认</span></label></span>
              <span class="vt-radio vt-blue"><label><input type="radio" name="radio1_2"
                    checked="checked" /><em></em><span>蓝色</span></label></span>
              <span class="vt-radio vt-red"><label><input type="radio" name="radio1_3"
                    checked="checked" /><em></em><span>红色</span></label></span>
              <span class="vt-radio vt-yellow"><label><input type="radio" name="radio1_4"
                    checked="checked" /><em></em><span>黄色</span></label></span>
              <span class="vt-radio vt-green"><label><input type="radio" name="radio1_5"
                    checked="checked" /><em></em><span>绿色</span></label></span>
              <span class="vt-radio vt-black"><label><input type="radio" name="radio1_6"
                    checked="checked" /><em></em><span>黑色</span></label></span>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;span class="vt-radio"&gt;</span></li>
                <li class="level2"><span>&lt;label&gt;</span></li>
                <li class="level3"><span>&lt;input type="radio" name="radio1" /&gt;&lt;em&gt;&lt;/em&gt;</span></li>
                <li class="level3"><span>&lt;span&gt;默认样式&lt;/span&gt;</span></li>
                <li class="level2"><span>&lt;/label&gt;</span></li>
                <li><span>&lt;/span&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">选中后文字也一起变色</div>
            <div class="example">
              <span class="vt-radio"><label><input type="radio" name="radio2_1"
                    checked="checked" /><em></em><span>默认</span></label></span>
              <span class="vt-radio vt-blue2"><label><input type="radio" name="radio2_2"
                    checked="checked" /><em></em><span>蓝色</span></label></span>
              <span class="vt-radio vt-red2"><label><input type="radio" name="radio2_3"
                    checked="checked" /><em></em><span>红色</span></label></span>
              <span class="vt-radio vt-yellow2"><label><input type="radio" name="radio2_4"
                    checked="checked" /><em></em><span>黄色</span></label></span>
              <span class="vt-radio vt-green2"><label><input type="radio" name="radio2_5"
                    checked="checked" /><em></em><span>绿色</span></label></span>
              <span class="vt-radio vt-black2"><label><input type="radio" name="radio2_6"
                    checked="checked" /><em></em><span>黑色</span></label></span>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;span class="vt-radio <span>vt-blue2</span>"&gt;</span></li>
                <li class="level2"><span>&lt;label&gt;</span></li>
                <li class="level3"><span>&lt;input type="radio" name="radio1" /&gt;&lt;em&gt;&lt;/em&gt;</span></li>
                <li class="level3"><span>&lt;span&gt;选中后文字也一起变色&lt;/span&gt;</span></li>
                <li class="level2"><span>&lt;/label&gt;</span></li>
                <li><span>&lt;/span&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">纵向单选框</div>
            <div class="example">
              <div class="vt-radio vt-blue"><label><input type="radio"
                    name="radio3_1" /><em></em><span>菠萝</span></label></div>
              <div class="vt-radio vt-blue"><label><input type="radio"
                    name="radio3_1" /><em></em><span>芒果</span></label></div>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;<span>div</span> class="vt-radio"&gt;</span></li>
                <li class="level2"><span>&lt;label&gt;</span></li>
                <li class="level3"><span>&lt;input type="radio" name="radio1" /&gt;&lt;em&gt;&lt;/em&gt;</span></li>
                <li class="level3"><span>&lt;span&gt;菠萝&lt;/span&gt;</span></li>
                <li class="level2"><span>&lt;/label&gt;</span></li>
                <li><span>&lt;/<span>div</span>&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">横向单选框</div>
            <div class="example">
              <span class="vt-radio vt-green"><label><input type="radio"
                    name="radio4_1" /><em></em><span>菠萝</span></label></span>
              <span class="vt-radio vt-green"><label><input type="radio"
                    name="radio4_1" /><em></em><span>芒果</span></label></span>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;<span>span</span> class="vt-radio"&gt;</span></li>
                <li class="level2"><span>&lt;label&gt;</span></li>
                <li class="level3"><span>&lt;input type="radio" name="radio1" /&gt;&lt;em&gt;&lt;/em&gt;</span></li>
                <li class="level3"><span>&lt;span&gt;菠萝&lt;/span&gt;</span></li>
                <li class="level2"><span>&lt;/label&gt;</span></li>
                <li><span>&lt;/<span>span</span>&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->
        </div>
        <!--radio-->

        <div id="checkbox" class="maindiv">
          <div class="page_tit">复选框 &lt;input type="checkbox"&gt;</div>
          <div class="table_row">
            <table class="ptable">
              <tr class="first">
                <td width="160" rowspan="6" align="center"><strong>颜色表</strong></td>
                <td>描述</td>
                <td>class</td>
              </tr>
              <tr>
                <td>蓝色</td>
                <td><code>vt-blue</code> <code>vt-blue2</code></td>
              </tr>
              <tr>
                <td>红色</td>
                <td><code>vt-red</code> <code>vt-red2</code></td>
              </tr>
              <tr>
                <td>黄色</td>
                <td><code>vt-yellow</code> <code>vt-yellow2</code></td>
              </tr>
              <tr>
                <td>绿色</td>
                <td><code>vt-green</code> <code>vt-green2</code></td>
              </tr>
              <tr>
                <td>黑色</td>
                <td><code>vt-black</code> <code>vt-black2</code></td>
              </tr>
              <tr>
                <td colspan="3"><strong>颜色后面加 2 时，表示选中后文字一起变色，具体见下方例示代码</strong></td>
              </tr>
            </table>
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">无文字描述</div>
            <div class="example">
              <span class="vt-checkbox"><label><input type="checkbox" checked="checked" /><em></em></label></span>
              <span class="vt-checkbox vt-blue"><label><input type="checkbox"
                    checked="checked" /><em></em></label></span>
              <span class="vt-checkbox vt-red"><label><input type="checkbox"
                    checked="checked" /><em></em></label></span>
              <span class="vt-checkbox vt-yellow"><label><input type="checkbox"
                    checked="checked" /><em></em></label></span>
              <span class="vt-checkbox vt-green"><label><input type="checkbox"
                    checked="checked" /><em></em></label></span>
              <span class="vt-checkbox vt-black"><label><input type="checkbox"
                    checked="checked" /><em></em></label></span>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;span class=&quot;vt-checkbox&quot;&gt;</span></li>
                <li class="level2"><span>&lt;label&gt;</span></li>
                <li class="level3"><span>&lt;input type=&quot;checkbox&quot; name=&quot;checkbox1[]&quot;
                    /&gt;&lt;em&gt;&lt;/em&gt;</span></li>
                <li class="level2"><span>&lt;/label&gt;</span></li>
                <li><span>&lt;/span&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">有文字描述</div>
            <div class="example">
              <span class="vt-checkbox"><label><input type="checkbox"
                    checked="checked" /><em></em><span>默认</span></label></span>
              <span class="vt-checkbox vt-blue"><label><input type="checkbox"
                    checked="checked" /><em></em><span>蓝色</span></label></span>
              <span class="vt-checkbox vt-red"><label><input type="checkbox"
                    checked="checked" /><em></em><span>红色</span></label></span>
              <span class="vt-checkbox vt-yellow"><label><input type="checkbox"
                    checked="checked" /><em></em><span>黄色</span></label></span>
              <span class="vt-checkbox vt-green"><label><input type="checkbox"
                    checked="checked" /><em></em><span>绿色</span></label></span>
              <span class="vt-checkbox vt-black"><label><input type="checkbox"
                    checked="checked" /><em></em><span>黑色</span></label></span>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;span class=&quot;vt-checkbox&quot;&gt;</span></li>
                <li class="level2"><span>&lt;label&gt;</span></li>
                <li class="level3"><span>&lt;input type=&quot;checkbox&quot; name=&quot;checkbox1[]&quot;
                    /&gt;&lt;em&gt;&lt;/em&gt;</span></li>
                <li class="level3"><span><span>&lt;span&gt;有文字描述&lt;/span&gt;</span></span></li>
                <li class="level2"><span>&lt;/label&gt;</span></li>
                <li><span>&lt;/span&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">选中后文字也一起变色</div>
            <div class="example">
              <span class="vt-checkbox"><label><input type="checkbox"
                    checked="checked" /><em></em><span>默认</span></label></span>
              <span class="vt-checkbox vt-blue2"><label><input type="checkbox"
                    checked="checked" /><em></em><span>蓝色</span></label></span>
              <span class="vt-checkbox vt-red2"><label><input type="checkbox"
                    checked="checked" /><em></em><span>红色</span></label></span>
              <span class="vt-checkbox vt-yellow2"><label><input type="checkbox"
                    checked="checked" /><em></em><span>黄色</span></label></span>
              <span class="vt-checkbox vt-green2"><label><input type="checkbox"
                    checked="checked" /><em></em><span>绿色</span></label></span>
              <span class="vt-checkbox vt-black2"><label><input type="checkbox"
                    checked="checked" /><em></em><span>黑色</span></label></span>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;span class=&quot;vt-checkbox <span>vt-blue2</span>&quot;&gt;</span></li>
                <li class="level2"><span>&lt;label&gt;</span></li>
                <li class="level3"><span>&lt;input type=&quot;checkbox&quot; name=&quot;checkbox1[]&quot;
                    /&gt;&lt;em&gt;&lt;/em&gt;</span></li>
                <li class="level3"><span>&lt;span&gt;选中后文字也一起变色&lt;/span&gt;</span></li>
                <li class="level2"><span>&lt;/label&gt;</span></li>
                <li><span>&lt;/span&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">纵向显示</div>
            <div class="example">
              <div class="vt-checkbox vt-blue"><label><input type="checkbox"
                    checked="checked" /><em></em><span>菠萝</span></label></div>
              <div class="vt-checkbox vt-blue"><label><input type="checkbox" /><em></em><span>芒果</span></label></div>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;<span>div</span> class=&quot;vt-checkbox&quot;&gt;</span></li>
                <li class="level2"><span>&lt;label&gt;</span></li>
                <li class="level3"><span>&lt;input type=&quot;checkbox&quot; name=&quot;checkbox1[]&quot;
                    /&gt;&lt;em&gt;&lt;/em&gt;</span></li>
                <li class="level3"><span>&lt;span&gt;菠萝&lt;/span&gt;</span></li>
                <li class="level2"><span>&lt;/label&gt;</span></li>
                <li><span>&lt;/<span>div</span>&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">横向显示</div>
            <div class="example">
              <span class="vt-checkbox vt-green"><label><input type="checkbox"
                    checked="checked" /><em></em><span>菠萝</span></label></span>
              <span class="vt-checkbox vt-green"><label><input type="checkbox" /><em></em><span>芒果</span></label></span>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;<span>span</span> class=&quot;vt-checkbox&quot;&gt;</span></li>
                <li class="level2"><span>&lt;label&gt;</span></li>
                <li class="level3"><span>&lt;input type=&quot;checkbox&quot; name=&quot;checkbox1[]&quot;
                    /&gt;&lt;em&gt;&lt;/em&gt;</span></li>
                <li class="level3"><span>&lt;span&gt;菠萝&lt;/span&gt;</span></li>
                <li class="level2"><span>&lt;/label&gt;</span></li>
                <li><span>&lt;/<span>span</span>&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->
        </div>
        <!--checkbox-->

        <div id="switch" class="maindiv">
          <div class="page_tit">开关 &lt;input type="checkbox"&gt;</div>
          <div class="page_tit3">本质上是单个的复选框</div>
          <div class="table_row">
            <div class="page_tit2">默认样式</div>
            <div class="example">
              <input class="vt-switch" type="checkbox" />
              <input class="vt-switch" type="checkbox" checked="checked" />
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;input class=&quot;vt-switch&quot; type=&quot;checkbox&quot; name=&quot;checkbox1&quot;
                    /&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">带ON/OFF文字</div>
            <div class="example">
              <input class="vt-switch vt-onoff" type="checkbox" />
              <input class="vt-switch vt-onoff" type="checkbox" checked="checked" />
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;input class=&quot;vt-switch <span>vt-onoff</span>&quot; type=&quot;checkbox&quot;
                    name=&quot;checkbox1&quot; /&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">自定义文字描述</div>
            <div class="page_tit3">class="<code>vt-switch-tip</code>"，为 <code>&lt;input&gt;</code> <span>自定义文字描述</span>
            </div>
            <div class="example">
              <span class="vt-switch-tip"><label><input
                    type="checkbox" /><em></em><span>是否发射核弹</span><span>发射！！</span></label></span>
              <span class="vt-switch-tip"><label><input type="checkbox"
                    checked="checked" /><em></em><span>是否发射核弹</span><span>发射！！</span></label></span>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;div class=&quot;vt-switch-tip&quot;&gt;</span></li>
                <li class="level2"><span>&lt;label&gt;</span></li>
                <li class="level3"><span>&lt;input type=&quot;checkbox&quot; name=&quot;checkbox1&quot;
                    /&gt;&lt;em&gt;&lt;/em&gt;</span></li>
                <li class="level3"><span>&lt;span&gt;是否发射核弹&lt;/span&gt;</span></li>
                <li class="level3"><span>&lt;span&gt;发射！！&lt;/span&gt;</span></li>
                <li class="level2"><span>&lt;/label&gt;</span></li>
                <li><span>&lt;/div&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">其他颜色</div>
            <div class="page_tit3">class="<code>vt-switch</code>"，为 <code>&lt;input&gt;</code>
              额外添加一个<span>颜色CSS</span>即可</div>
            <div class="page_tit3">class="<code>vt-switch-tip</code>"，为 <code>&lt;input&gt;</code>
              父标签额外添加一个<span>颜色CSS</span>即可</div>
            <div class="example">
              <div class="page_tit4">
                <input class="vt-switch vt-blue" type="checkbox" checked="checked" />
                <input class="vt-switch vt-red" type="checkbox" checked="checked" />
                <input class="vt-switch vt-yellow" type="checkbox" checked="checked" />
                <input class="vt-switch vt-green" type="checkbox" checked="checked" />
                <input class="vt-switch vt-black" type="checkbox" checked="checked" />
              </div>
              <div class="page_tit4">
                <input class="vt-switch vt-onoff vt-blue" type="checkbox" checked="checked" />
                <input class="vt-switch vt-onoff vt-red" type="checkbox" checked="checked" />
                <input class="vt-switch vt-onoff vt-yellow" type="checkbox" checked="checked" />
                <input class="vt-switch vt-onoff vt-green" type="checkbox" checked="checked" />
                <input class="vt-switch vt-onoff vt-black" type="checkbox" checked="checked" />
              </div>
              <div class="page_tit4">
                <span class="vt-switch-tip vt-blue"><label><input type="checkbox"
                      checked="checked" /><em></em><span>是否发射核弹</span><span>发射！！</span></label></span>
                <span class="vt-switch-tip vt-red"><label><input type="checkbox"
                      checked="checked" /><em></em><span>是否发射核弹</span><span>发射！！</span></label></span>
                <span class="vt-switch-tip vt-yellow"><label><input type="checkbox"
                      checked="checked" /><em></em><span>是否发射核弹</span><span>发射！！</span></label></span>
                <span class="vt-switch-tip vt-green"><label><input type="checkbox"
                      checked="checked" /><em></em><span>是否发射核弹</span><span>发射！！</span></label></span>
                <span class="vt-switch-tip vt-black"><label><input type="checkbox"
                      checked="checked" /><em></em><span>是否发射核弹</span><span>发射！！</span></label></span>
              </div>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;input class=&quot;vt-switch <span>vt-blue</span>&quot; type=&quot;checkbox&quot;
                    /&gt;</span></li>
                <li></li>
                <li>/****或****/</li>
                <li></li>
                <li><span>&lt;div class=&quot;vt-switch-tip <span>vt-blue</span>&quot;&gt;</span></li>
                <li class="level2"><span>&lt;label&gt;</span></li>
                <li class="level3"><span>&lt;input type=&quot;checkbox&quot; name=&quot;checkbox1&quot;
                    /&gt;&lt;em&gt;&lt;/em&gt;</span></li>
                <li class="level3"><span>&lt;span&gt;是否发射核弹&lt;/span&gt;</span></li>
                <li class="level3"><span>&lt;span&gt;发射！！&lt;/span&gt;</span></li>
                <li class="level2"><span>&lt;/label&gt;</span></li>
                <li><span>&lt;/div&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->
        </div>
        <!--switch-->

        <div id="file" class="maindiv">
          <div class="page_tit">上传控件 &lt;input type="file"&gt;</div>
          <div class="page_tit3">class="<code>vt-file</code>"，为 <code>&lt;input&gt;</code> 父标签内的上传控件增加默认样式</div>
          <div class="table_row">
            <div class="page_tit2">默认样式</div>
            <div class="example">
              <div class="vt-file"><input type="file" /><span><i></i>默认样式</span></div>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;div class="vt-file"&gt;</span></li>
                <li class="level2"><span>&lt;input type=&quot;file&quot; /&gt;</span></li>
                <li class="level2"><span>&lt;span&gt;&lt;i&gt;&lt;/i&gt;默认样式&lt;/span&gt;</span></li>
                <li><span>&lt;/div&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->

          <div class="page_tit3">class="<code>vt-file vt-lit</code>"，为 <code>&lt;input&gt;</code> 父标签内的上传控件增加小尺寸样式
          </div>
          <div class="table_row">
            <div class="page_tit2">小尺寸</div>
            <div class="example">
              <span class="vt-file vt-lit"><input type="file" /><span><i></i>小尺寸</span></span>
              <span class="vt-file vt-lit vt-blue"><input type="file" /><span><i></i>小尺寸</span></span>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;span class="vt-file <span>vt-lit</span>"&gt;</span></li>
                <li class="level2"><span>&lt;input type=&quot;file&quot; /&gt;</span></li>
                <li class="level2"><span>&lt;span&gt;&lt;i&gt;&lt;/i&gt;默认样式&lt;/span&gt;</span></li>
                <li><span>&lt;/span&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">其他颜色</div>
            <div class="example">
              <span class="vt-file vt-blue"><input type="file" /><span><i></i>蓝色样式</span></span>
              <span class="vt-file vt-red"><input type="file" /><span><i></i>红色样式</span></span>
              <span class="vt-file vt-yellow"><input type="file" /><span><i></i>黄色样式</span></span>
              <span class="vt-file vt-green"><input type="file" /><span><i></i>绿色样式</span></span>
              <span class="vt-file vt-black"><input type="file" /><span><i></i>黑色样式</span></span>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;span class="vt-file <span>vt-blue</span>"&gt;</span></li>
                <li class="level2"><span>&lt;input type=&quot;file&quot; /&gt;</span></li>
                <li class="level2"><span>&lt;span&gt;&lt;i&gt;&lt;/i&gt;默认样式&lt;/span&gt;</span></li>
                <li><span>&lt;/span&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">无图标样式</div>
            <div class="example">
              <div class="vt-file"><input type="file" /><span>无图标样式</span></div>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;div class="vt-file"&gt;</span></li>
                <li class="level2"><span>&lt;input type=&quot;file&quot; /&gt;</span></li>
                <li class="level2"><span>&lt;span&gt;无图片样式&lt;/span&gt;</span></li>
                <li><span>&lt;/div&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">自定义图片样式&lt;img&gt;</div>
            <div class="page_tit3">图片无尺寸要求</div>
            <div class="example">
              <div class="vt-file"><input type="file" /><span><img src="css/img.png" />自定义图片样式</span></div>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;div class="vt-file"&gt;</span></li>
                <li class="level2"><span>&lt;input type=&quot;file&quot; /&gt;</span></li>
                <li class="level2"><span>&lt;span&gt;<span>&lt;img src=&quot;css/img.png&quot;
                      /&gt;</span>自定义图片样式&lt;/span&gt;</span></li>
                <li><span>&lt;/div&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->

          <div class="table_row">
            <div class="page_tit2">选中文件反馈</div>
            <div class="page_tit3">由于css不支持检测是否有选中文件，所以选中反馈需要添加额外的 <code>javascript</code> 代码，这是本项目唯一有用到
              <code>javascript</code> 的地方
            </div>
            <div class="page_tit3">当然这不是必要的，你可以选择不加，只是用户体验不好，用户不知道有没有选中文件</div>
            <div class="page_tit3">本例使用了原生的 <code>javascript</code> 代码，无需加载 <code>jQuery</code></div>
            <div class="example">
              <span class="vt-file"><input type="file" onchange="fileok(this)" multiple
                  data-oldname="sad" /><span><i></i>未选中文件</span></span>
              <span class="vt-file"><input type="file" onchange="fileok(this)" multiple /><span>无图标样式</span></span>
              <span class="vt-file"><input type="file" onchange="fileok(this)" multiple /><span><img
                    src="css/img.png" />自定义图标样式</span></span>
              <span class="vt-file"><input type="file" onchange="fileok(this)" multiple /><span><i
                    class="vt-iconfont icon-help"></i>font样式</span></span>
              <script>
                function fileok(o) {
                  //获取文件名
                  let files = o.files;
                  let fval;
                  if (files.length > 1) {
                    fval = files.length + "个文件";
                  } else if (files.length == 1) {
                    fval = files[0].name;
                  }

                  //修改文本
                  let prefix = '已选择: ';
                  let reg = /(\<i(\s{1,}class\=[\"\'][A-z0-9_\-]*[\"\'])?\>\<\/i\>|\<img\s{1,}src\=[\"\'][A-z0-9_\/\.\-]*[\"\']\s{0,}\/{0,}\>)?(\S*)/;
                  let span = o.parentNode.getElementsByTagName("span")[0];
                  spanhtml = span.innerHTML;
                  match = spanhtml.match(reg);
                  oldname = span.dataset.oldname;

                  html = '';
                  if (match[1]) {
                    html += match[1];
                  }
                  if (fval) {
                    html += prefix + fval;
                    span.innerHTML = html;
                    if (!oldname) {
                      span.dataset.oldname = match[3];
                    }
                  } else {
                    html += oldname;
                    span.innerHTML = html;
                  }
                }
              </script>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;div class="vt-file"&gt;</span></li>
                <li class="level2"><span>&lt;input type=&quot;file&quot;
                    <span>onchange=&quot;fileok(this)&quot;</span> /&gt;</span></li>
                <li class="level2"><span>&lt;span&gt;&lt;i&gt;&lt;/i&gt;未选中文件&lt;/span&gt;</span></li>
                <li><span>&lt;/div&gt;</span></li>
                <li><span></span></li>
                <li><span>&lt;script&gt;</span></li>
                <li><span>function fileok(o)</span></li>
                <li><span>{</span></li>
                <li class="level2"><span>//获取文件名</span></li>
                <li class="level2"><span>let files = o.files;</span></li>
                <li class="level2"><span>let fval;</span></li>
                <li class="level2"><span>if(files.length>1){</span></li>
                <li class="level3"><span>fval = files.length+&quot;个文件&quot;;</span></li>
                <li class="level2"><span>}else if(files.length==1){</span></li>
                <li class="level3"><span>fval = files[0].name;</span></li>
                <li class="level2"><span>}</span></li>
                <li><span></span></li>
                <li class="level2"><span>//修改文本</span></li>
                <li class="level2"><span>let prefix = &#39;已选择: &#39;;</span></li>
                <li class="level2"><span>let reg =
                    /(\&lt;i(\s{1,}class\=[\&quot;\&#39;][A-z0-9_\-]*[\&quot;\&#39;])?\&gt;\&lt;\/i\&gt;|\&lt;img\s{1,}src\=[\&quot;\&#39;][A-z0-9_\/\.\-]*[\&quot;\&#39;]\s{0,}\/{0,}\&gt;)?(\S*)/;</span>
                </li>
                <li class="level2"><span>let span = o.parentNode.getElementsByTagName(&quot;span&quot;)[0];</span></li>
                <li class="level2"><span>spanhtml = span.innerHTML;</span></li>
                <li class="level2"><span>match = spanhtml.match(reg);</span></li>
                <li class="level2"><span>oldname = span.dataset.oldname;</span></li>
                <li><span></span></li>
                <li class="level2"><span>html = &#39;&#39;;</span></li>
                <li class="level2"><span>if(match[1]){</span></li>
                <li class="level3"><span>html += match[1];</span></li>
                <li class="level2"><span>}</span></li>
                <li class="level2"><span>if(fval){</span></li>
                <li class="level3"><span>html += prefix + fval;</span></li>
                <li class="level3"><span>span.innerHTML = html;</span></li>
                <li class="level3"><span>if(!oldname){</span></li>
                <li class="level4"><span>span.dataset.oldname = match[3];</span></li>
                <li class="level3"><span>}</span></li>
                <li class="level2"><span>}else{</span></li>
                <li class="level3"><span>html += oldname;</span></li>
                <li class="level3"><span>span.innerHTML = html;</span></li>
                <li class="level2"><span>}</span></li>
                <li><span>}</span></li>
                <li><span>&lt;/script&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
            <!--pre-->
          </div>
          <!--table_row-->
        </div>
        <!--file-->

        <div id="table" class="maindiv">
          <div class="page_tit">表格 &lt;table&gt;</div>
          <div class="table_row">
            <table class="ptable">
              <tr class="first">
                <td width="140">标签</td>
                <td>class=""</td>
                <td>描述</td>
              </tr>
              <tr>
                <td>&lt;table&gt;</td>
                <td>&lt;table class="<code>vt-table</code>"&gt;…&lt;/table&gt;</td>
                <td>表格本身</td>
              </tr>
              <tr>
                <td>&lt;table&gt;的父标签</td>
                <td>&lt;div class="<code>vt-tablein</code>"&gt;&lt;table&gt;…&lt;/table&gt;&lt;/div&gt;</td>
                <td>元素内的表格</td>
              </tr>
            </table>
          </div>
          <!--table_row-->

          <div id="table_1" class="table_row">
            <div class="page_tit2">默认样式：<span>少量的内边距（padding:8px）和边框</span></div>
            <div class="page_tit3">class="<code>vt-table</code>"，为 <code>&lt;table&gt;</code>
              标签增加<span>样式</span>，对下级表格不生效</div>
            <div class="page_tit3">class="<code>vt-tablein</code>"，为 <code>&lt;table&gt;</code>
              父标签内的下一级表格增加<span>样式</span></div>
            <div class="page_tit3">class="<code>vt-tablein</code> <code>vt-tableall</code>"，为
              <code>&lt;table&gt;</code> 父标签内的所有下级表格增加<span>样式</span>
            </div>
            <div class="example">
              <table class="vt-table vt-odd">
                <tr>
                  <td width="100">A</td>
                  <td width="200">B</td>
                  <td>C</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>
                    <table class="vt-table">
                      <tr>
                        <td>ASC</td>
                        <td>ASC</td>
                      </tr>
                    </table>
                  </td>
                  <td>
                    <table>
                      <tr>
                        <td>这是一个表格，</td>
                        <td>对下级的表格不会生效</td>
                      </tr>
                      <tr>
                        <td>aa</td>
                        <td>bb</td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
              <p>&nbsp;</p>
              <div class="vt-tablein">
                <table>
                  <tr>
                    <td width="100">A</td>
                    <td width="200">B</td>
                    <td>C</td>
                  </tr>
                  <tr>
                    <td>1</td>
                    <td>
                      <table class="vt-table">
                        <tr>
                          <td>ASC</td>
                          <td>ASC</td>
                        </tr>
                      </table>
                    </td>
                    <td>
                      <table>
                        <tr>
                          <td>这是一个表格，</td>
                          <td>对下级的表格不会生效</td>
                        </tr>
                        <tr>
                          <td>aa</td>
                          <td>bb</td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </div>
              <p>&nbsp;</p>
              <div class="vt-tablein vt-tableall vt-round vt-odd">
                <table>
                  <tr>
                    <td width="100">A</td>
                    <td width="200">B</td>
                    <td>C</td>
                  </tr>
                  <tr>
                    <td>1</td>
                    <td>
                      <table class="vt-table">
                        <tr>
                          <td>ASC</td>
                          <td>ASC</td>
                        </tr>
                      </table>
                    </td>
                    <td>
                      <table>
                        <tr>
                          <td>这是一个表格，</td>
                          <td>对所有下级的表格生效</td>
                        </tr>
                        <tr>
                          <td>aa</td>
                          <td>bb</td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;table class="vt-table"&gt;</span></li>
                <li class="level2"><span>…</span></li>
                <li><span>&lt;/table&gt;</span></li>
                <li></li>
                <li>/****或****/</li>
                <li></li>
                <li><span>&lt;div class="vt-tablein"&gt;</span></li>
                <li class="level2"><span>&lt;table&gt;</span></li>
                <li class="level3"><span>…</span></li>
                <li class="level2"><span>&lt;/table&gt;</span></li>
                <li><span>&lt;/div&gt;</span></li>
                <li></li>
                <li><span>&lt;div class="vt-tablein vt-tableall"&gt;</span></li>
                <li class="level2"><span>&lt;table&gt;</span></li>
                <li class="level3"><span>…</span></li>
                <li class="level2"><span>&lt;/table&gt;</span></li>
                <li><span>&lt;/div&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
          </div>
          <!--table_row-->

          <div id="table_2" class="table_row">
            <div class="page_tit2">首行样式</div>
            <div class="page_tit3">class="<code>vt-table</code> <code>vt-first</code>"，为 <code>&lt;table&gt;</code>
              标签增加<span>首行样式</span></div>
            <div class="page_tit3">class="<code>vt-tablein</code> <code>vt-first</code>"，为 <code>&lt;table&gt;</code>
              父标签内的表格增加<span>首行样式</span></div>
            <div class="page_tit3">当表格存在 <span>&lt;thead&gt;</span> 时，需而外添加一个 class <code>vt-thead</code>，否则
              <span>&lt;tbody&gt;</span> 第一行（实际上的表格第二行）也会变成<span>首行样式</span>
            </div>
            <div class="example">
              <table class="vt-table vt-first">
                <tr>
                  <td rowspan="1" colspan="2">A</td>
                  <td>B</td>
                  <td>C</td>
                </tr>
                <tr>
                  <td rowspan="2" colspan="1">1</td>
                  <td>a</td>
                  <td>b</td>
                  <td>c</td>
                </tr>
                <tr>
                  <td>d</td>
                  <td>e</td>
                  <td rowspan="2" colspan="1">f</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>g</td>
                  <td>h</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>i</td>
                  <td rowspan="1" colspan="2">j</td>
                </tr>
              </table>
              <br />
              <table class="vt-table vt-first vt-thead">
                <thead>
                  <tr>
                    <td>A</td>
                    <td>B</td>
                    <td>C</td>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>a</td>
                    <td>b</td>
                    <td>c</td>
                  </tr>
                  <tr>
                    <td>d</td>
                    <td>e</td>
                    <td>f</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;table class="vt-table <span>vt-nobor-out</span>"&gt;</span></li>
                <li class="level2"><span>…</span></li>
                <li><span>&lt;/table&gt;</span></li>
                <li></li>
                <li>/****或****/</li>
                <li></li>
                <li><span>&lt;div class="vt-tablein <span>vt-nobor-out</span>"&gt;</span></li>
                <li class="level2"><span>&lt;table&gt;</span></li>
                <li class="level3"><span>…</span></li>
                <li class="level2"><span>&lt;/table&gt;</span></li>
                <li><span>&lt;/div&gt;</span></li>
                <li></li>
                <li>/**********/</li>
                <li></li>
                <li><span>&lt;div class="vt-tablein <span>vt-thead</span>"&gt;</span></li>
                <li class="level2"><span>&lt;table&gt;</span></li>
                <li class="level3"><span>&lt;thead&gt;</span></li>
                <li class="level4"><span>…</span></li>
                <li class="level3"><span>&lt;/thead&gt;</span></li>
                <li class="level3"><span>&lt;tbody&gt;</span></li>
                <li class="level4"><span>…</span></li>
                <li class="level3"><span>&lt;/tbody&gt;</span></li>
                <li class="level2"><span>&lt;/table&gt;</span></li>
                <li><span>&lt;/div&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
          </div>
          <!--table_row-->

          <div id="table_3" class="table_row">
            <div class="page_tit2">无外部边框样式</div>
            <div class="page_tit3">class="<code>vt-table</code> <code>vt-nobor-out</code>"，为
              <code>&lt;table&gt;</code> 标签增加<span>无外部边框样式</span>
            </div>
            <div class="page_tit3">class="<code>vt-tablein</code> <code>vt-nobor-out</code>"，为
              <code>&lt;table&gt;</code> 父标签内的表格增加<span>无外部边框样式</span>
            </div>
            <div class="example">
              <table class="vt-table vt-nobor-out">
                <tr>
                  <td rowspan="1" colspan="2">A</td>
                  <td>B</td>
                  <td>C</td>
                </tr>
                <tr>
                  <td rowspan="2" colspan="1">1</td>
                  <td>a</td>
                  <td>b</td>
                  <td>c</td>
                </tr>
                <tr>
                  <td>d</td>
                  <td>e</td>
                  <td rowspan="2" colspan="1">f</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>g</td>
                  <td>h</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>i</td>
                  <td rowspan="1" colspan="2">j</td>
                </tr>
              </table>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;table class="vt-table <span>vt-nobor-out</span>"&gt;</span></li>
                <li class="level2"><span>…</span></li>
                <li><span>&lt;/table&gt;</span></li>
                <li></li>
                <li>/****或****/</li>
                <li></li>
                <li><span>&lt;div class="vt-tablein <span>vt-nobor-out</span>"&gt;</span></li>
                <li class="level2"><span>&lt;table&gt;</span></li>
                <li class="level3"><span>…</span></li>
                <li class="level2"><span>&lt;/table&gt;</span></li>
                <li><span>&lt;/div&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
          </div>
          <!--table_row-->

          <div id="table_4" class="table_row">
            <div class="page_tit2">无内部边框样式</div>
            <div class="page_tit3">class="<code>vt-table</code> <code>vt-nobor-in</code>"，为 <code>&lt;table&gt;</code>
              标签增加<span>无内部边框样式</span></div>
            <div class="page_tit3">class="<code>vt-tablein</code> <code>vt-nobor-in</code>"，为
              <code>&lt;table&gt;</code> 父标签内的表格增加<span>无内部边框样式</span>
            </div>
            <div class="example">
              <table class="vt-table vt-nobor-in">
                <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                </tr>
                <tr>
                  <td>4</td>
                  <td>5</td>
                  <td>6</td>
                </tr>
              </table>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;table class="vt-table <span>vt-nobor-in</span>"&gt;</span></li>
                <li class="level2"><span>…</span></li>
                <li><span>&lt;/table&gt;</span></li>
                <li></li>
                <li>/****或****/</li>
                <li></li>
                <li><span>&lt;div class="vt-tablein <span>vt-nobor-in</span>"&gt;</span></li>
                <li class="level2"><span>&lt;table&gt;</span></li>
                <li class="level3"><span>…</span></li>
                <li class="level2"><span>&lt;/table&gt;</span></li>
                <li><span>&lt;/div&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
          </div>
          <!--table_row-->

          <div id="table_5" class="table_row">
            <div class="page_tit2">无全部边框样式</div>
            <div class="page_tit3">class="<code>vt-table</code> <code>vt-nobor-all</code>"，为
              <code>&lt;table&gt;</code> 标签增加<span>无全部边框样式</span>
            </div>
            <div class="page_tit3">class="<code>vt-tablein</code> <code>vt-nobor-all</code>"，为
              <code>&lt;table&gt;</code> 父标签内的表格增加<span>无全部边框样式</span>
            </div>
            <div class="example">
              <table class="vt-table vt-nobor-all">
                <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                </tr>
                <tr>
                  <td>4</td>
                  <td>5</td>
                  <td>6</td>
                </tr>
              </table>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;table class="vt-table <span>vt-nobor-all</span>"&gt;</span></li>
                <li class="level2"><span>…</span></li>
                <li><span>&lt;/table&gt;</span></li>
                <li></li>
                <li>/****或****/</li>
                <li></li>
                <li><span>&lt;div class="vt-tablein <span>vt-nobor-all</span>"&gt;</span></li>
                <li class="level2"><span>&lt;table&gt;</span></li>
                <li class="level3"><span>…</span></li>
                <li class="level2"><span>&lt;/table&gt;</span></li>
                <li><span>&lt;/div&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
          </div>
          <!--table_row-->

          <div id="table_6" class="table_row">
            <div class="page_tit2">水平边框样式</div>
            <div class="page_tit3">class="<code>vt-table</code> <code>vt-bor-tr</code>"，为 <code>&lt;table&gt;</code>
              标签增加<span>水平边框样式</span></div>
            <div class="page_tit3">class="<code>vt-tablein</code> <code>vt-bor-tr</code>"，为 <code>&lt;table&gt;</code>
              父标签内的表格增加<span>水平边框样式</span></div>
            <div class="example">
              <table class="vt-table vt-bor-tr">
                <tr>
                  <td rowspan="1" colspan="2">A</td>
                  <td>B</td>
                  <td>C</td>
                </tr>
                <tr>
                  <td rowspan="2" colspan="1">1</td>
                  <td>a</td>
                  <td>b</td>
                  <td>c</td>
                </tr>
                <tr>
                  <td>d</td>
                  <td>e</td>
                  <td rowspan="2" colspan="1">f</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>g</td>
                  <td>h</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>i</td>
                  <td rowspan="1" colspan="2">j</td>
                </tr>
              </table>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;table class="vt-table <span>vt-bor-tr</span>"&gt;</span></li>
                <li class="level2"><span>…</span></li>
                <li><span>&lt;/table&gt;</span></li>
                <li></li>
                <li>/****或****/</li>
                <li></li>
                <li><span>&lt;div class="vt-tablein <span>vt-bor-tr</span>"&gt;</span></li>
                <li class="level2"><span>&lt;table&gt;</span></li>
                <li class="level3"><span>…</span></li>
                <li class="level2"><span>&lt;/table&gt;</span></li>
                <li><span>&lt;/div&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
          </div>
          <!--table_row-->

          <div id="table_7" class="table_row">
            <div class="page_tit2">水平边框无外边框样式</div>
            <div class="page_tit3">class="<code>vt-table</code> <code>vt-bor-tr-noout</code>"，为
              <code>&lt;table&gt;</code> 标签增加<span>水平边框无外边框样式</span>
            </div>
            <div class="page_tit3">class="<code>vt-tablein</code> <code>vt-bor-tr-noout</code>"，为
              <code>&lt;table&gt;</code> 父标签内的表格增加<span>水平边框无外边框样式</span>
            </div>
            <div class="example">
              <table class="vt-table vt-bor-tr-noout">
                <tr>
                  <td rowspan="1" colspan="2">A</td>
                  <td>B</td>
                  <td>C</td>
                </tr>
                <tr>
                  <td rowspan="2" colspan="1">1</td>
                  <td>a</td>
                  <td>b</td>
                  <td>c</td>
                </tr>
                <tr>
                  <td>d</td>
                  <td>e</td>
                  <td rowspan="2" colspan="1">f</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>g</td>
                  <td>h</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>i</td>
                  <td rowspan="1" colspan="2">j</td>
                </tr>
              </table>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;table class="vt-table <span>vt-bor-tr-noout</span>"&gt;</span></li>
                <li class="level2"><span>…</span></li>
                <li><span>&lt;/table&gt;</span></li>
                <li></li>
                <li>/****或****/</li>
                <li></li>
                <li><span>&lt;div class="vt-tablein <span>vt-bor-tr-noout</span>"&gt;</span></li>
                <li class="level2"><span>&lt;table&gt;</span></li>
                <li class="level3"><span>…</span></li>
                <li class="level2"><span>&lt;/table&gt;</span></li>
                <li><span>&lt;/div&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
          </div>
          <!--table_row-->

          <div id="table_8" class="table_row">
            <div class="page_tit2">圆角样式</div>
            <div class="page_tit3">class="<code>vt-table</code> <code>vt-round</code>"，为 <code>&lt;table&gt;</code>
              标签增加<span>圆角样式</span></div>
            <div class="page_tit3">class="<code>vt-tablein</code> <code>vt-round</code>"，为 <code>&lt;table&gt;</code>
              父标签内的表格增加<span>圆角样式</span></div>
            <div class="example">
              <table class="vt-table vt-round">
                <tr>
                  <th>1</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Username</th>
                </tr>
                <tr>
                  <td rowspan="2">1</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@TwAwanbao</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td colspan="2">Larry the Bird</td>
                  <td>@twitter</td>
                </tr>
              </table>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;table class="vt-table <span>vt-round</span>"&gt;</span></li>
                <li class="level2"><span>…</span></li>
                <li><span>&lt;/table&gt;</span></li>
                <li></li>
                <li>/****或****/</li>
                <li></li>
                <li><span>&lt;div class="vt-tablein <span>vt-round</span>"&gt;</span></li>
                <li class="level2"><span>&lt;table&gt;</span></li>
                <li class="level3"><span>…</span></li>
                <li class="level2"><span>&lt;/table&gt;</span></li>
                <li><span>&lt;/div&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
          </div>
          <!--table_row-->

          <div id="table_9" class="table_row">
            <div class="page_tit2">行间隔背景色 <span>奇数(vt-odd) 或 偶数(vt-even)</span></div>
            <div class="page_tit3">class="<code>vt-table</code> <code>vt-odd</code> / <code>vt-even</code>"，为
              <code>&lt;table&gt;</code> 标签增加<span>行间隔背景色</span>
            </div>
            <div class="page_tit3">class="<code>vt-tablein</code> <code>vt-odd</code> / <code>vt-even</code>"，为
              <code>&lt;table&gt;</code> 父标签内的表格增加<span>行间隔背景色</span>
            </div>
            <div class="example">
              <table class="vt-table vt-odd">
                <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Username</th>
                </tr>
                <tr>
                  <td>1</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@TwAwanbao</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
                </tr>
              </table>
              <br />
              <table class="vt-table vt-even">
                <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Username</th>
                </tr>
                <tr>
                  <td>1</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@TwAwanbao</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
                </tr>
              </table>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;table class="vt-table <span>vt-odd</span>"&gt;</span></li>
                <li class="level2"><span>…</span></li>
                <li><span>&lt;/table&gt;</span></li>
                <li></li>
                <li>/****或****/</li>
                <li></li>
                <li><span>&lt;div class="vt-tablein <span>vt-odd</span>"&gt;</span></li>
                <li class="level2"><span>&lt;table&gt;</span></li>
                <li class="level3"><span>…</span></li>
                <li class="level2"><span>&lt;/table&gt;</span></li>
                <li><span>&lt;/div&gt;</span></li>
                <li></li>
                <li>/****************或****************/</li>
                <li></li>
                <li><span>&lt;table class="vt-table <span>vt-even</span>"&gt;</span></li>
                <li class="level2"><span>…</span></li>
                <li><span>&lt;/table&gt;</span></li>
                <li></li>
                <li>/****或****/</li>
                <li></li>
                <li><span>&lt;div class="vt-tablein <span>vt-even</span>"&gt;</span></li>
                <li class="level2"><span>&lt;table&gt;</span></li>
                <li class="level3"><span>…</span></li>
                <li class="level2"><span>&lt;/table&gt;</span></li>
                <li><span>&lt;/div&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
          </div>
          <!--table_row-->

          <div id="table_10" class="table_row">
            <div class="page_tit2">鼠标悬停样式</div>
            <div class="page_tit3">class="<code>vt-table</code> <code>vt-hover</code>"，为 <code>&lt;table&gt;</code>
              标签增加<span>鼠标悬停样式</span></div>
            <div class="page_tit3">class="<code>vt-table</code> <code>vt-hover</code>"，为 <code>&lt;table&gt;</code>
              父标签内的表格增加<span>鼠标悬停样式</span></div>
            <div class="example">
              <table class="vt-table vt-hover">
                <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Username</th>
                </tr>
                <tr>
                  <td>1</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@TwAwanbao</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
                </tr>
              </table>
            </div>
            <!--example-->
            <div class="pre">
              <ol>
                <li><span>&lt;table class="vt-table <span>vt-hover</span>"&gt;</span></li>
                <li class="level2"><span>…</span></li>
                <li><span>&lt;/table&gt;</span></li>
                <li></li>
                <li>/****或****/</li>
                <li></li>
                <li><span>&lt;div class="vt-tablein <span>vt-hover</span>"&gt;</span></li>
                <li class="level2"><span>&lt;table&gt;</span></li>
                <li class="level3"><span>…</span></li>
                <li class="level2"><span>&lt;/table&gt;</span></li>
                <li><span>&lt;/div&gt;</span></li>
              </ol>
              <div class="precode"></div>
              <div class="preicon">
                <span class="precopy precopy1" title="格式化复制"></span>
                <span class="precopy precopy2" title="复制"></span>
                <span class="pretype" title="暗色调"></span>
              </div>
              <!--precopy-->
            </div>
          </div>
          <!--table_row-->
        </div>
        <!--table-->

      </div>
      <!--pright-->
    </div>
    <!--page_pr-->
  </div>
  <!--page-->

  <!--以下为非必要代码-->
  <script src="https://cdn.staticfile.org/jquery/1.10.1/jquery.min.js"></script>
  <link href="css/style.css" type="text/css" rel="stylesheet" />
  <script>
    $(window).scroll(function () {
      saction();
    });
    function saction() {
      liarr = new Array("color", "code", "typography", "container", "grid", "layout", "animate", "iconfont", "charts", "card", "jumbotron", "list", "media", "nav", "breadcrumb", "badge", "placeholder", "avatar", "spinners", "divider", "passwordinput", "image", "alert", "modal", "pagination", "progress", "steps", "timeline", "poptip", "menu", "circle", "carousel", "tag", "dropdown", "rate", "input", "textarea", "select", "button", "radio", "checkbox", "switch", "file", "table_1", "table_2", "table_3", "table_4", "table_5", "table_6", "table_7", "table_8", "table_9", "table_10");
      d = new Array();
      t = $(window).scrollTop();
      for (i = 0; i < liarr.length; i++) {
        d[i] = $("#" + liarr[i]).offset().top - 50; //提前50像素生效
        if (t > d[i]) {
          $(".li_" + liarr[i]).addClass("on").siblings().removeClass("on");
        }
      }
    }
    window.onload = function () {
      bheight = window.innerHeight - 20;
      pheight = $(".pleft").height();
      if (bheight < pheight) {
        $(".pleft").addClass("pleft_no");
      }
    }

    //复制代码
    $(document).on("click", ".precopy", function () {
      pa = $(this).parents(".pre");
      olheight = $(pa).find("ol").height();
      if ($(pa).find(".precode").is(":hidden")) {
        ol = $(pa).find("ol li");
        $(pa).find(".precode").css({ "height": olheight + "px" });
        html = '<textarea class="vt-text vt-ful">';
        for (i = 0; i < ol.length; i++) {
          if ($(this).hasClass("precopy2")) {
            if ($(ol[i]).hasClass("level2")) {
              html += "&nbsp;&nbsp;";
            } else if ($(ol[i]).hasClass("level3")) {
              html += "&nbsp;&nbsp;&nbsp;&nbsp;";
            } else if ($(ol[i]).hasClass("level4")) {
              html += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
            } else if ($(ol[i]).hasClass("level5")) {
              html += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
            } else if ($(ol[i]).hasClass("level6")) {
              html += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
            } else if ($(ol[i]).hasClass("level7")) {
              html += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
            } else if ($(ol[i]).hasClass("level8")) {
              html += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
            } else if ($(ol[i]).hasClass("level9")) {
              html += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
            } else if ($(ol[i]).hasClass("level9")) {
              html += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
            }
          }

          if ($(ol[i]).find("span").html()) {
            text = $(ol[i]).find("span").html();
            text = text.replace(/\<\/{0,1}span\>/g, "");  //去除span标签
            html += text;
          }

          if (i != ol.length - 1 && $(this).hasClass("precopy2")) {
            html += "\n";
          }
        }
        html += '</textarea>';
        $(pa).find(".precode").html(html);
        $(pa).find("ol").hide();
        $(pa).find(".precode").show();
        $(pa).find(".precode textarea").select();
      }
      else {
        $(pa).find("ol").show();
        $(pa).find(".precode").hide();
        $(pa).find(".precode").html("");
        $(pa).find(".precode").css({ "height": "" });
      }
    })
    $(document).on("blur", ".precode textarea", function () {
      $(this).parents(".pre").find("ol").show();
      $(this).parent(".precode").hide();
      $(this).parent(".precode").html("");
    })

    //代码暗色调
    $(document).on("click", ".pretype", function () {
      $(this).parents(".pre").toggleClass("on");
    })
  </script>

</body>

</html>